Font Awesome fonts

0
votes

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.

1
htmlcssfont-awesome
Did you mean to post some CSS as well? – Run_Script
No, I meant the I have included the CSS link in the HTML as well. – av8304
show us how you linked to the css in the html. and please read How to create a Minimal, Reproducible Example – Chris L

1 Answers

0
votes

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".