Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 29, 2019 at 4:34 pm #1161248
    peterolle

    I need to have an icon for each social account.

    For example:

    <ul class="social-icons-list">
	<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
	<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
	<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
	<li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
</ul>

    What is the correct code so the icons actually show up?

    Thanks.

    November 29, 2019 at 4:56 pm #1161261
    peterolle

    For someone looking into this, I used CSS to style it.

    .fa.fa-facebook:after {
	font-family: 'entypo-fontello';
	content: ' \E8f5';
}
    November 29, 2019 at 7:25 pm #1161339
    Victoria

    Hi peterolle,

    You’re using Font Awesome classes, did you upload Font Awesome?

    Best regards,
    Victoria

    November 29, 2019 at 7:43 pm #1161341
    peterolle

    I asked for the correct html to use for enfold. That code is just an example.

    Thanks.

    December 2, 2019 at 2:23 am #1161708
    Mike

    Hi,
    Sorry for the late reply, this is the html:

    <ul class="noLightbox social_bookmarks icon_count_5">
<li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" aria-label="Link to Twitter" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter" rel="noopener noreferrer"><span class="avia_hidden_link_text">Twitter</span></a></li>
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" aria-label="Link to Facebook" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook" rel="noopener noreferrer"><span class="avia_hidden_link_text">Facebook</span></a></li>
<li class="social_bookmarks_whatsapp av-social-link-whatsapp social_icon_3"><a aria-label="Link to WhatsApp" href="tel://1-555-555-5555" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="WhatsApp"><span class="avia_hidden_link_text">WhatsApp</span></a></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_4"><a aria-label="Link to Instagram" href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li>
</ul>

    Best regards,
    Mike

    December 5, 2019 at 12:35 pm #1162933
    peterolle

    Thank you Mike. I will use my example with CSS. That HTML is too much to show social icons in a simple widget.

    Enfold should include a social widget to use anywhere needed. Like header and footer, but for sidebar or short code.

    Is there a way to show that existing ones in a widget or short code?

    Thanks.

    December 5, 2019 at 8:17 pm #1163185
    Victoria

    Hi peterolle,

    You can add the generated code to the text widget and add the widget anywhere where you need it.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.