Including Fontawesome manually

1

Hi freecodecampers.

I’m curious to know why my code is running the fontawesome CSS from the link provided on the website (Here) correctly, but not when I manually include it by placing the downloadable fontawesome-all.css in my directory.

This is what I tried to do initially:

<link rel="stylesheet" href="./fontawesome-all.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./myportfolio.css"> 

<div class="col-4">
  <h3>AROUND THE WEB</h3>
  <i class="fab fa-facebook fa-lg"></i>
</div>

And then this is what I did for it to work.

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./myportfolio.css">

<div class="col-4">
  <h3>AROUND THE WEB</h3>
  <i class="fab fa-facebook fa-lg"></i>
</div>

What made it so the < i > didn’t show the brand’s logo, but instead an empty square?

2

I only use the font awesome CDN too and never download it locally, but apparently you also need to download the font files as well and link the relative folder accordingly:

check this out here:

3 Likes
3

This helped a lot. Not sure why the search didn’t pop up on Google, but I guess I got to take a habit of actually entering my searches on Stack Overflow or on here directly, instead of going through Google all the time.

Have a good day!

(I just didn’t know you had to create a “fonts” folder and put in all the fonts, that’s what was causing the issue. You can also call the folder “webfonts”, instead of “fonts”, this way you won’t have to go inside the fontawesome-all.css file to change the links from “webfonts” to “fonts”.)