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

    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!


    you 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


    Thank 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!


    if 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) :

    and 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;

    That works perfect! Thank you very much!


    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,

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Widget Title with custom icon’ is closed to new replies.