-
AuthorPosts
-
August 30, 2022 at 11:23 am #1363181
Hello,
I would like to know if it is possible to insert an image instead of an icon in the “Icon box”.
The reference page is this.
Here is an image to better understand.
I tried adding this code:.thrive-coaching html body [data-av_iconfont = 'entypo-fontello']: before { opacity: 0; }
but it does not work
Thanks for the support.
Manuela- This topic was modified 2 years, 3 months ago by famarinu.
August 30, 2022 at 1:57 pm #1363203Hey Manuela,
Thanks for the link to your page and the screenshot, I’m not sure which image you wish to use, but a while back you have link to this image: consciousuncoupling.png
so I used it in this example, you can change the image in the code below:.main_color .thrive-coaching.iconbox_top .iconbox_icon { background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png); height: 3px; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .thrive-coaching.iconbox_top .iconbox_icon:before { opacity: 0; }
the expected results:
After applying the css, please clear your browser cache and check.Best regards,
MikeAugust 30, 2022 at 3:30 pm #1363220First : wouldn’t it be better to have a white png of that icon – to have the same look for the icons on top?
.main_color .thrive-coaching.iconbox_top .iconbox_icon { content: " "; background-color: #FFF; background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png); background-size: 35px; background-position: center 6px; background-repeat: no-repeat; border: 2px solid #b3dce1; color: transparent !important; /*** this is enough to get rid of entypo-fontello icon ***/ } /**** if you decide to have a white png file you can get rid of that ****/ .main_color .thrive-coaching.iconbox_top a.iconbox_icon:hover { background-color: #b3dce1; border: 2px solid #b3dce1; }
in this case with white png file use only:
.main_color .thrive-coaching.iconbox_top .iconbox_icon { content: " "; background-image: url(//link-to-your-white-png-file/consciousuncoupling-white.png); background-size: 35px; background-position: center 6px; background-repeat: no-repeat; color: transparent !important; /*** this is enough to get rid of entypo-fontello icon ***/ }
August 31, 2022 at 11:02 am #1363331Hi Support,
yes it woks.
thank you for your support,Manuela
August 31, 2022 at 11:24 am #1363334 -
AuthorPosts
- The topic ‘Image instead an image’ is closed to new replies.