Font Awesome icons not showing

Support
#1

Hi there,

I am using Font Awesome icons that I manually put into the Superfly menu. These icons are taking up space on the menu but I can’t see them.

I saw an earlier thread about downloading the Font Awesome pack and adding it to the folder wp-content/themes/x/fonts/fontawesome and I did that but I still can’t see the icons.

Unfortunately, I’m working on a local server so I can’t show you where that is happening, but would you be able to assist?

#2

Hey @Jacqui,

Regretfully, we have no means to investigate local installs. Please copy your site to an online staging server.

Thanks.

#3

Hey @Jacqui,

There’s actually no icon being outputted. It looks like the CSS is missing.

Please give us the details how you added the icons in Superfly. Also give us WP Admin access in a Secure Note.

Thanks.

#4

I added them manually into the copyright contents area in the Superfly menu using this code:

 <div class="social"><hr><a href="https://www.facebook.com/unknowndesignagency/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> </a><a href="https://plus.google.com/102682175702989173285" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a><a href="https://www.instagram.com/unknowndesignagency/" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i></a><a href="https://www.linkedin.com/company/unknown-jhb/" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="https://twitter.com/unknownjhb" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
#5

Hi There,

Please replace your HTML code with this:

<div class="social">
	<hr>
	<a href="https://www.facebook.com/unknowndesignagency/" target="_blank"><i class="x-icon x-icon-facebook" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://plus.google.com/102682175702989173285" target="_blank"><i class="x-icon x-icon-google-plus" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://www.instagram.com/unknowndesignagency/" target="_blank"><i class="x-icon x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>
	<a href="https://www.linkedin.com/company/unknown-jhb/" target="_blank"><i class="x-icon x-icon-linkedin" data-x-icon="" aria-hidden="true"></i></a> 
	<a href="https://twitter.com/unknownjhb" target="_blank"><i class="x-icon x-icon-twitter" data-x-icon="" aria-hidden="true"></i></a>
</div>
```

Let us know how it goes!
#6

This worked perfectly! Thanks :slight_smile:

#7

Glad we were able to help :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.