Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #434189

    When rolling over an image a overlay with an arrow appears.
    On this forum i have found info on how to to change this arrow to another icon in the icon set (by changing the icon numer in code), but not how to change is to something custom.
    The logo of my company has a specific arrow in it, and i’d like to use that arrow as rollover image.

    How could i accomplish this?
    Maybe by using a transparent .png as rollover instead of the icon?
    Maybe by adding my own icon to the icon font?

    Anyone who could help me with this?

    Kind Regards


    Hey liquidsociety!

    Could you provide us with a link to the site in question so that we can take a closer look please? You should be able to change the icon in the following CSS:

    .image-overlay .image-overlay-inside:before {
      content: "\E869";
      font-family: 'entypo-fontello';

    Tutorial on adding your own icon:

    Best regards,


    Hi Rikard,

    I haven’t started development on this website jet (it would be my second website using enfold)

    I made an example of what i’m trying to accomplish:

    The triangle is part of my company logo, it’s quite specific and not available in the icon set.

    Maybe something like this would work?

    .image-overlay .image-overlay-inside:before {
      background-image: url("overlay.png");
    • This reply was modified 5 years, 10 months ago by  liquidsociety.


    Yes, it should work. If not, please post the link to your website so we can look into it :)

    Best regards,



    I started development on the site!

    I tried the method in reply 437351, but didn’t really get the result i wanted.
    I have decided to keep is simple and just replace the arrow icon with a custom font icon.
    In other words: this is a reply to Rikards post, not the last 2 posts. :)

    I have uploaded a new fontello font, and tried out the code Rikard provided.
    This dit not change the rollover-icon however…

    .image-overlay .image-overlay-inside:before {
      content: "\ue800";
      font-family: 'my_iconfont';

    The name of the font and the content code should be correct, the the old arrow is still used.

    Any tips?


    • This reply was modified 5 years, 7 months ago by  liquidsociety.

    Found the solution somewhere else on the forum!
    Solution: editing this array in the functions.php file.
    'ov_external' => array( 'font' =>'entypo-fontello', 'icon' => 'ue832'),

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

The topic ‘Custom image rollover icon’ is closed to new replies.