0

I recently installed font-awesome from the site using npm. When I am using it in my HTML file, it ends up showing squares on the page instead of the icon. Can someone help me with this?

The code where I am using the fontawesome icons:

<li class="nav-item active"><a class="nav-link" href="index.html"><span class="fas fa-home"></span> Home</a></li>

I have included the CSS as well.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
av8304
  • 17
  • 1
  • 6

1 Answers1

0

Black squares usually indicate a fault in font type. But I cant say this for sure. Try san serif, otherwise you can check out the answers in this post: Font awesome is not showing icon

Best answer there:
In my case i made the following mistake in my css code.

*{
    font-family: 'Open Sans', sans-serif !important;
}

This will override all font family rules for the entire page. My solution was to move the code to body like so.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.
Answer By: Daniel Barde

--

It also can depend on how you import the library, is it via the CDN or via a folder?

Via a CDN: Check if the path / url is correct (Maybe an unauthorised link?).
Via folder / download: Maybe use"/fonts/fontawesome-free-5.3.1-web/css/all.css" instead of "/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css".

Floris-Jan
  • 1
  • 3
  • I have not used any custom font-family style in any of the CSS. – av8304 Jun 05 '20 at 15:03
  • I've edited my response. If its not de library, I hope someone with more experience will look at this question. Good luck with the project. – Floris-Jan Jun 05 '20 at 15:23