How to add a fontello icon with HTML

Hey DROR,

You can’t add an icon in the Special Heading Element but you imitate the Special Heading using a Code Block, with a fontello icon:

<div class="av-special-heading av-special-heading-h3">
<span class="av-icon-char av-icon-char-custom" style="font-size:20px;line-height:20px;width:20px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
<h3 class="av-special-heading-tag " itemprop="headline">The Title</h3>
<div class="special-heading-border"><div class="special-heading-inner-border"></div></div>
</div>

just replace The Title, with the title you want to use, then on your Quick CSS section, located in Enfold > General Styling, add this css code:

#top span.av-icon-char.av-icon-char-custom {
    float: left;
    margin-right: 4px;
}

#top span.av-icon-char.av-icon-char-custom:before {
    content: "\e836" !important;
}

just replace content with the right icon. Hope it helps :)

Best regards,
Nikko

Hi bakbek,

Can you try giving me a link showing the special heading you mentioned? so I can try to give the exact html code for the Code Block.

Best regards,
Nikko

Hi,

Thanks, you can use this html code:

<div style="padding-bottom:20px;font-size:34px;" class="av-special-heading av-special-heading-h2  blockquote modern-quote modern-centered  av-inherit-size ">
<span class="av-icon-char av-icon-char-custom" style="font-size:20px;line-height:20px;width:20px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
<h2 class="av-special-heading-tag " itemprop="headline">מה אומרים בוגרי הקורס שלנו?</h2>
<div class="special-heading-border"><div class="special-heading-inner-border"></div></div>
</div>

Hope this helps :)

Best regards,
Nikko