Archived topic
Add icons to widget area?
6 replies · Started by Mark on December 20, 2016
How do I add icons to a widget area? For example an area that lists Address, Phone, and Email I want to have an icons as labels for each item versus the text
Hi Mark,
You can use Font Awesome icons for that. Head over to http://fontawesome.io/icons/ and find the icon you want, then add it to the text widget. e.g.
<i class="fa fa-phone" aria-hidden="true"></i> 555-555-1212
Cheers!
Lyle
Hi Mark,
The icons can be inserted as HTML in widgets.
For e-mail, try something like this:
<a href="mailto:YOUR E-MAIL HERE"><i class="fa fa-envelope-o"></i></a>
For phone number:
<a href="tel:###-###-####"><i class="fa fa-phone"></i></a>
You can choose the icons from GP's built in FontAwesome library here: http://fontawesome.io/icons/
Let me know if you need more info.
Perfect, thank you so much for the help!
You're welcome :)
Hi Leo -
I am missing something. Probably something simple. Do I need to create the fa class or install fontawesome somewhere? I pasted your code into a "Custom HTML" section in a footer widget, and a text section in a footer widget...and the spot where the fontawesome icon is supposed to be is blank. I am using BeaverBuilder. If I paste the code into a regular page, an envelope icon shows up briefly. And then when I publish it disappears.
So. Thanks in advance for your help. And - if FontAwesome is quirky- is there another way to put icons into the contact widget? Thanks! Laura
Hi Laura,
Any chance you can open a new topic?
It would be good if you can link me to your site as well.
Thanks!