-
Posts
-
Im going bonkers over what is basic stuff but how on earth do I embed an Entypo icon into a text block. I’ve seen other people ask and the reply is always….
“You can use the html entity of the icon. A char map of all supported icons can be found here: http://www.entypo.com/characters/
Eg if you want to use the first icon (phone icon) insert following code into your text editor field
‘📞’ “
Yeah, I get that but how do I actually write the code to make it happen? Do I have to call up the font family or write code which will turn the into the ‘📞’ into the correct glyph? I need it spelt out as im being an idiot.
Then if I want to change the colour, and icon background, hows that done. Im working on a dark background so I want no disc or outline, just the shape. Also, if I put some text under that icon how can I control the line height between the two?
Cheers
1) No, just write 📞 and the character will be displayed. There’s no need to specify the font family because the icons are not “standard” characters but they’re part of the private use area: http://en.wikipedia.org/wiki/Private_Use_(Unicode)
That said we’ll include a “font” shortcode in the next version (I already created it and sent the patch to Kriesi) and then you don’t need to take care of the unicode anymore.
2) The shortcode will support a line-height/color option too. Personally I’d wrap the icon into a span – then you can use the style attribute like:
<span style="color: #333; line-height: 20px; font-size: 20px;">📞</span>Ok Dude,
I think you will have to just treat me as an idiot and take me through this in baby steps.
a) I create a text box on my Home page
b) I write a title and add your code incl the Entypo code (📷 which represents the camera icon)
c) all I get is my title and a square box which clearly means im writing garbage
Where am I going wrong?
Very strange – I’m not sure why this happens. However we’ve a plan B. Download the shortcode file (which will be included in the next update) here: http://www.mediafire.com/view/?a9iqj9rb8vw9z43 and place it into the wp-contentthemesenfoldconfig-templatebuilderavia-shortcodes folder. Afterwards you can use the “magic wand icon” (visual mode) to insert the icon into the text.
works a treat. Double Dude!!!
Thanks
and for your next trick. It will be to create a nice two state/color rollover effect and a link!!! lol
Cheers as always, you guys are the best
Andy
You can wrap the shortcode into an ahref element like:
<a href="http://google.com"> [av_font_icon color="" icon="185" size="12px"] </a>Tbh I don’t want to “bloat” this shortcode – if we start to add a link field we also need to add a “target” field (same window/new window), a styling field, etc. – eventually all these fields will be irritating for the user and they’re actually unnecessary because you can use the visual editor and the link icon to turn any content (even shortcodes) into links without coding.
- The topic ‘Icon embed into text block’ is closed to new replies.