Add icons to widget area?

[Mark]

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

[Lyle]

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

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Perfect, thank you so much for the help!

[Leo]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Laura]

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

[Leo]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts