Okay
  Public Ticket #2292826
Custom icons for Image with hotspots
Closed

Comments

  • jusforcrap started the conversation
    February 6, 2020 at 5:00pm

    Is there any way to customize each hotspot with a custom icons image. 

    Since the '+' can be replaced with numbers, theoretically it should be possible.

    Any help would really help.


    Also having some trouble with the resizing of that element on the page (works well on mobile, but on the desktop it's too large). I know I'm missing something very small but it's driving me nuts.

  •   Andrew replied privately
  • CB replied
    April 6, 2020 at 1:37pm

    Hi Andrew, I had the same question but cannot see what you answered!

    What would be the custom CSS to replace the default "+" sign icon by font awesome icons? For example the "fa-dot-circle-o" one?

    Thanks very much, 

  •  3,021
    Andrew replied
    April 9, 2020 at 1:30pm

    Hi there,

    Sorry for late response.

    Try the following custom css:

    .nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span:after{
   display:none !important;
}
.nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span:before{
   background:transparent !important;
}
.nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span:before{
    font-family: FontAwesome !important;
    content: "\f085" !important;
    position: absolute;
    height: 2px;
    width: 10px;
    left: 6px;
    top: 2px;
    content: ' ';
    background-color: #fff;
}

    Hope this helps.

  • CB replied
    April 9, 2020 at 2:11pm

    Perfect thanks!