Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #208727

    Is it possible to have a different image overlay text/icon font for different content.

    For example, I have products that I would like to have a specific icon, like a magnifying glass.
    But I also have pics that lead to a blog post that shouldn’t have the magnifying glass. I would rather have it be an arrow or something else.

    Is this possible?


    Hey jtree5757!

    Please see Ismael’s post here



    I’m still a little confused. Maybe you can clarify..

    	.image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
    	.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\E832";}
    	.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\E897";}

    This is the only code that I found in the base.css that references font icons.

    Do you mind explaining the differences between the three for us please?

    Not sure how this will change the rollover icon for my products and regular images not related to my products. It seems like they are connected as they are classified as the same type in the above css. Sorry if I’m just misunderstanding.




    You can use the class of the surrounding div to change the content. I.e. if you want to use a different icon for product images use

    .single-product-main-image .image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }

    and this rule will overwrite the default icon.

    The difference between the three css code lines is just the icon. \E869 is the default icon, \E832 is the icon for external links and \E897 is the video icon.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.