Font awesome icons are shown as sqaures

HTML-CSS
1

Hi there,

I am doing my “Portfolio Project” and I am trying to add some Font Awesome icons (Facebook, Twitter, GitHub, Mail, Phone )

I have linked them through <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> as I did in my previous project where it worked. But I had different icons there.

In this project those icons are not showing up and all that is shown is squares.
I have them written in HTML like that:

<li><a href="" class="contacts-link"><i class="fa fa-facebook-square"
                            aria-hidden="true"></i>Facebook</a></li>

I have tried to add some font-family and other settings in CSS recommended by Font Awesome but it wouldn’t work. I have also looked in DevTools at this project made by freeCodeCamp and I noticed they have ::before used with these icons, but I can’t figure out what exactly they’ve done with it.

Any suggestions?

Best regards!

2

Do you have the code where we can test it ourselves? Like codepen, github, replit, etc.

4

I have set it up quickly

Is it OK like that?

5 
<script src="https://kit.fontawesome.com/877d2cecdc.js" crossorigin="anonymous"></script>

I added this at the head element and it worked.

6

With V5 it should be fab not fa. For example <i class="fab fa-facebook-square"></i>

You have to look at the docs for the different versions of fontawesome because they tend to have breaking changes.

7

I still can’t figure out why it’s not working

I have even downloaded those icons from Font Awesome and have it in my VS Code as #all.css and #brands.css linked to the HTML file

I have also linked the same link they use in the freeCodeCamp example of the project.

I have tried many variations of typing fa like fab, fa-brands, etc.

I have even just copied the Font Awesome link from my previous project and then copied the code for the icon and it doesn’t work as well in my current project (in my previous project it all works)

None of these works.

Here is the link to my CodePen code with this project - https://codepen.io/01JohnnyJohn/pen/jOQyYyj

Just in case CodePen is not working:

This is all links I have tried - all.css and brands.css are downloaded files from Font Awesome and other links are links I’ve tried to use.

By the way, If i comment out the last TWO links the “mail”

<link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="all.css">
    <link rel="stylesheet" href="brands.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

I have nothing related to icons in my CSS.

I need help with those icons, because I can’t finish the project without them(

Best regards!

8

You are overwriting the font-family.

*,
* ::after,
* ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poly", serif;
}

That is one practical example of why I think using that selector to set the font-family is questionable. Use the body to set the font-family.

You still need to correct some of the class names. Use the docs I linked to and search for the icons.

3 Likes
9

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