Site logo

Archived topic

Add icons to widget area?

6 replies · Started by Mark on December 20, 2016

Viewing posts 1–7 of 7

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!

This archived topic is closed to new replies.