-
AuthorPosts
-
May 12, 2015 at 8:32 pm #443343
Is there an easy way to do this? I am guessing these blocks are designed to only use the theme’s icons for simplicity, but would useful to upload my own images to be used as icons. I guess I can also achieve this with regular HTML in a text block or code block, any chance you can provide a code example of these content elements to work off of?
May 13, 2015 at 9:07 am #443639Bump?
May 13, 2015 at 3:49 pm #443779Hi!
You can refer to this tutorial and upload your own icons – http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/
If you would like to use images, please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your element a custom CSS class and then post the link to your page along with the image you would like to use so we can provide you an accurate custom CSS code.Cheers!
YigitMay 27, 2015 at 7:11 pm #450777Thanks for your response, and sorry for the late follow-up! What I meant was, can you provide a generic HTML block that I can use as a replacement for the Icon Box using my own image? Or does it have to be customized to my site? I would think there would be an easy < table > code block that mimics the Icon Box or Icon List.
May 28, 2015 at 6:22 am #450912Hi!
Yes it would be something custom, it’s not that easy because an image is not the same as a web font and therefore must be treated differently. Using a webfont would be ideal as they scale better and can be re-used for other elements in the theme (you can create your own web fonts using a tool like Fontello).
Regards,
JosueFebruary 10, 2020 at 2:56 pm #1183074Dear Kriesis,
I’d like to replace the discs in ul lists with my own icon-font. I found this code in an earlier post and added it to my custom css:ul.icon-bullets li {
list-style: none;
}ul.icon-bullets li {
padding-left: 8px;
}ul.icon-bullets li:before {
/*content: ‘\2713’;
font-family: ‘entypo-fontello’;*/
content: ‘\800’;
font: ‘herz’!important;
font-size: 20px;
font-weight: normal;
position: absolute;
left: 5px;
}Unfortunatelly it doesn’t work. What did I wrong? Please see here: https://tante-birgit.de/2020/test-liste
Thanks and best regards
AnneFebruary 11, 2020 at 2:19 pm #1183491Hi Anne,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaFebruary 11, 2020 at 3:59 pm #1183563This reply has been marked as private.February 15, 2020 at 9:32 pm #1184849Hi annevoelkel,
Everything seems correct, I checked many times. I don’t understand why the browser does not render the icon correctly.
I’ll ask my colleague to check too.
Best regards,
VictoriaFebruary 15, 2020 at 10:15 pm #1184868Hi,
Thank you for the login, I took a look at the icon file that you uploaded and found that the correct code for the icon is\e800
with the font-family “herz” so I changed this in your Quick CSS and in your child theme stylesheet.
I also changed your padding-left from 8px to 18px so the icon would not overlap your text.
Please clear your browser cache and check.Best regards,
MikeFebruary 17, 2020 at 11:55 am #1185173Hi Mike, hi Victoria,
thanks a lot for the great support!Best regards Anne
February 17, 2020 at 2:48 pm #1185225Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Replace Icon Box or Icon List icons with images?’ is closed to new replies.