Tagged: custom icon, widget title
-
AuthorPosts
-
March 4, 2022 at 12:10 pm #1343108
Hello,
I´ve created a custom fontello font with my personal icon – which works great in text blocks and so on. But now I wonder if there is a chance to get my custom icon into the wigdet title?
I created a shortcode for the icon within a post: [av_font_icon icon='ue800' font='dentalimpex_icons' style='' caption='' size='40px' position='left' color='#D02514' link='' linktarget='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-3oqd' sc_version='1.0' admin_preview_bg=''][/av_font_icon]
How can I add this to the widget title? I made some custom changes to the widget title appearance. When I use the custom-html widget and try to use h3 to immitate the widget title I don`t get the appearance I set up in the advanced styling.
You can see the widget title styling in the link. If I could get my icon just infront of the title it would be perfect.
Thank you very much!March 4, 2022 at 9:39 pm #1343214you can insert it via quick css and to a pseudocontainer f.e:
#footer .widgettitle::before { content: "\e800"; font-family: "dentalimpex_icons"; color: #D02514; position: relative !important; top: 3px; margin-right: 5px; font-weight: 400 !important; font-size: 1.2em; }
you have to adjust the code to your needs – here only footer widgets are set
March 5, 2022 at 1:28 pm #1343250Thank you very much, that works perfect. Just one more question: the “d” within the icon is now transparent. I tried to build the svg with a white background and it looks alright in my adobe illustrator, but somehow the icon is always transparent on the webpage. Is there a possibility to set the backround of the icon in the widget title to white? Only the “d” within the quare icon should be white.
Thank you very much!
March 5, 2022 at 4:22 pm #1343255if you have a link to your site in private content area – i do not see – because i’m participant too.
But as a container like others you can set in the css code above a background-color.
if you only want to have that icon placed in your content – you don’t need the font-icon. You can place like this your svg itself. Then you can even have multicolor icons in front.
_________
See here an example test page ( with a custom font of mine – you had to change it to your font-family) : https://webers-testseite.de/#footerand code a bit different:
#footer .widgettitle { padding-left: 40px; position: relative; } #footer .widgettitle::before { position: absolute !important; width: 30px !important; height: 30px !important; top: -2px; left: 0; content: "\e844"; font-family: "fontellico"; font-weight: 400 !important; font-size: 1.2em; line-height: 35px; background-color: #f5c61b; color: blue; text-align: center; }
March 5, 2022 at 8:19 pm #1343287That works perfect! Thank you very much!
March 5, 2022 at 9:50 pm #1343294Hi,
Glad Guenni007 could help, thanks for sharing Guenni007
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Widget Title with custom icon’ is closed to new replies.