Adding FontAwesome Icons to Social links in the footer widgets

[Maria Campbell]

Hi,

I want to add Font Awesome Icons to a custom menu footer widget before each social media link. What ids and classes would I use to make it happen? Please advise. Thanks!

Maria

[Tom]

I would add the Font Awesome HTML directly into my menu items when creating the menu in “Appearance > Menus”. The navigation label accepts HTML, so you can just add them directly in there.

Let me know if that works for you 🙂

[Maria Campbell]

Doesn’t work. Shouldn’t it be enqueued in functions.php and added in CSS? I know you have all that turned off, but… I’m also using the Child Theme. Does that make a difference for GP styling?

[Tom]

Font Awesome is built into GP, so you don’t have to enqueue anything to get it to work.

The idea is the same as adding FA icons to your navigation, like the social icons in my navigation above.

Can you link me to your site where you’re trying this so I can take a look at why it’s not working?

Thanks!

[Maria Campbell]

Hi Tom,

Thanks for getting back to me. One environment I’m working on is local development, so you can’t see that. The other is parked, but it can be accessed. I just haven’t set up for it there yet. Give me a few minutes. I just have something else to wrap up.

Can’t I just do it through custom.css? I tried tho, and nothing happened. How can I call the fontawesome icons there? I tried different ids and classes, nothing yet. I’ll check again. Unless of course it’s not set up that way. I know you have a LOT of customization through the customizer, so the coding experience is a bit different then. I just have a lot to do in a very short period of time, and your theme is new to me. I’ll make it happen somehow! Getting it exactly the way I want it will probably be a bit more down the road. Which is fine!

Any help now would be very much appreciated. Thanks!

Will get back to you in a little bit with the link.

Best regards,

Maria

[Tom]

You definitely can, it’s just more difficult.

Adding the Font Awesome HTML to the navigation label doesn’t work at all?

You are using the “Custom Menu” widget in the footer, and applying a menu to it, correct?

[Maria Campbell]

Yes Tom. I did exactly as you showed me. What was weird was that the link was there, but not the fontawesome icon. And there was no verbiage like “Facebook” or “linkedin” etc. Could it be a plugin conflict of some kind?

[Tom]

Shouldn’t be any verbiage, just the icon.

There may be a plugin disabling HTML in the menus, but it’s unlikely.

You can use CSS if you like – add a class to the menu item, then use the Font Awesome unicode like this:

.my-added-class:before {
      font-family: FontAwesome;
      content: "\f230";
}

[Author]

Posts