-
Posts
-
Hello support,
After struggling with customization of social media icons and links (not to share, but to follow us on social media), I thought row of icons would do that. But I was lost in documentation.
Could you please help in putting 5 icons in a row, inside a 1/3 column to link to our social media pages?
Many thanksHey alirezamohy,
Could you please attach a mockup of what you’re trying to achieve?
Can you show us what you’ve got so far?
Best regards,
VictoriaHi,
You can add a text block element within your 1/3 element, then add this:
<a title="Facebook" href="http://www.facebook.com/kriesi.at" target="_blank" rel="noopener" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Facebook</span></a><a title="Facebook" href="http://www.facebook.com/kriesi.at" target="_blank" rel="noopener" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Facebook</span></a><a title="Facebook" href="http://www.facebook.com/kriesi.at" target="_blank" rel="noopener" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Facebook</span></a><a title="Facebook" href="http://www.facebook.com/kriesi.at" target="_blank" rel="noopener" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Facebook</span></a><a title="Facebook" href="http://www.facebook.com/kriesi.at" target="_blank" rel="noopener" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Facebook</span></a>You can change the facebook icon to your own, and the links as well. If you need further help then please to be a bit more specific as you to what you are looking to achieve.
Best regards,
RikardThank you Rikard,
its not showing anything. I have 2 guesses:
1. the span class of avia_hidden_link_text avoiding anything to show
2.the data-av_icon=”” is not copied in my text properly. should I copy the image or ascii code, or anything like that?Your support is highly appreciated.
Hello again
I managed to show the icons. now working on styling it and set the links….
Get back to you with final results and problems if any.
Many thanksHello again,
I have seen lots of codes including data-av_icon=””, where in brackets there is a small rectangle. I have also seen the wonderful post on “how to manage that small rectangle” hereWhen it comes to using some of existing default fonts, I could not understand how one of these existing Icons of Fontello could be copied into that field?
If I start creating and uploading my own symbols through Fontello, I end up having lots of fonts, which is not a good idea I guess.So I am looking for a solution based on using the input for data-av_icon from existing pre-loaded font.
Hope I could make it clear.
Many thanksHi,
I could not understand how one of these existing Icons of Fontello could be copied into that field?
The theme has a function called av_icon_string which generates the icon or symbol string. The generated string is the value of the data-av_icon attribute.
But since you’re adding the html manually, you have to extract the icons directly from the browser inspector. In any page, add an icon element in the advance layout builder, access the list of font icons, then inspect the page using your browser.
Please check the screenshot below.
// https://imgur.com/a/VMkqit4
So I am looking for a solution based on using the input for data-av_icon from existing pre-loaded font.
You might have to create a custom shortcode or function and use av_icon_string function to generate the icons. Unfortunately, this is beyond the scope of support.
Best regards,
Ismael
- You must be logged in to reply to this topic.