Custom image rollover icon - Support | Kriesi.at

Tagged: custom, icon, image, rollover

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

Author

Posts
April 24, 2015 at 4:04 pm #434189

liquidsociety
Participant

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

April 26, 2015 at 8:54 am #434798
Rikard
Keymaster
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: http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/

Best regards,
Rikard
April 30, 2015 at 12:08 pm #437351
liquidsociety
Participant
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 9 years, 7 months ago by liquidsociety.
April 30, 2015 at 1:28 pm #437402

Yigit
Keymaster

Hi!

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

Best regards,
Yigit

August 3, 2015 at 5:04 pm #482272
liquidsociety
Participant
Hello,

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?

Thanks!
- This reply was modified 9 years, 4 months ago by liquidsociety.
August 4, 2015 at 9:55 am #482592

liquidsociety
Participant

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'),
Author

Posts