Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #1343214

    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

    #1343250

    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!

    #1343255

    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) : https://webers-testseite.de/#footer

    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;
    }
    #1343287

    That works perfect! Thank you very much!

    #1343294

    Hi,
    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

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