[Support request] Unable to show font awesome icons

[Ankit]

Hi,

Can you please guide me how can I get the font awesome work on my site, I have tried this several times: https://docs.generatepress.com/article/adding-icons-to-menu-items/ but without any luck, all I get is blank.

[Tom]

Hi there,

Font Awesome is turned off by default. If you go to “Customize > General”, uncheck the “Essential icons” option.

Then Font Awesome should work.

Let me know 🙂

[Ankit]

Thanks Tom, but I am getting these for social icons:

[Tom]

Those look like custom icons, not Font Awesome. Maybe coming from a plugin?

[Ankit]

No all I have done is added this to header.php

<link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&#8221; rel=”stylesheet” integrity=”sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=”anonymous”>
<script defer src=”https://use.fontawesome.com/releases/v5.0.9/js/all.js&#8221; integrity=”sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl” crossorigin=”anonymous”></script>

[Tom]

That looks like you’re including Font Awesome 4 and 5? You should definitely only choose one.

However, the icons you showed me aren’t Font Awesome iconsI don’t think. If you’d like to link me to the page, I can check further.

[Ankit]

Thanks Tom, should I remove these and then try again and how can I privately post the link so you can have a look.

[Tom]

You can edit your initial post and add the URL to the URL field – it’s private.

Let me know 🙂

[Ankit]

Hey Tom I have added the url.

[Tom]

I’m seeing these in the footer, which are using Font Awesome: https://www.screencast.com/t/bZ6PyQK18Md

They look like they’re working as they should.

Is there somewhere else I should be looking?

[Ankit]

Thanks tom, how can I change colours of these icons?

[Tom]

Since you’re using a custom HTML widget, wrap your icon widgets in an element like this:

<div class="footer-icons">
    Your icons in here
</div>

Then do this in CSS:

.footer-icons a {
    color: #000000;
}

Let me know if you need more info 🙂

[Ankit]

Thanks Tom, now on a different problem, if you look at the homepage of the url, the image and text looks fine on desktop, but on mobile they are all over the place can you please me in fixing this.

Thanks again

Ankit Yadav

[Leo]

Hi there,

Can you open a new topic for a separate question?

Thanks!

[Author]

Posts