CODEWITHSUNDEEP
htmlcssfont-awesome
MestreALMO
MestreALMO

Reputation: 171

How can I add the Font Awesome to my project so it displays the icons correctly?

So... I accessed:

https://fontawesome.com/start

Downloaded the zip file, I just want to use the icons, so I grabbed the fontawesome.min.css file and connected with my html file:

<link rel="stylesheet" href="lib/css/fontawesome.min.css">

In their site I found a code that I want to use:

<i class="fas fa-cloud-download-alt"></i>

The link for this code above is here: https://fontawesome.com/icons/cloud-download-alt?style=solid

The code that I grabbed in their web site isn't working.

What am I missing here? How can I add the Font Awesome to my project so it displays the icons?

Upvotes: 0

Views: 1187

Answers (2)

MestreALMO
MestreALMO

Reputation: 171

So I found the answer, it is needed those two files so fontsawesome works: all.min.css and all.min.js plus webfonts folder in the root and then all the code from "Font Awesome" will work, those files are the minimum required. Also it may be even smaller if you don't need all the code, instead of "all", there are smaller files that allow to use just a smaller part of "Font Awesome".

Upvotes: 1

bron
bron

Reputation: 1548

To load a minimum for maximum performance you may use this

1. Create a folder "webfonts". In this folder, create a folder "font-awesome" and copy three font awesome files in this folder. Then, create a stylesheet "fontloader.css" and link this in your html file with <link rel="stylesheet" href="webfonts/fontloader.css">

+-- [webfonts]
|      +-- [font-awesome]
|      |      +-- fa-solid-900.woff2
|      |      +-- fa-solid-900.woff
|      |      +-- fa-solid-900.ttf
|      |
|      +-- fontloader.css

Contents of fontloader.css

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
         url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype");
}
.fa, .fas, .far, .fal, .fad, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-size: 1em;
    line-height: 1;
    text-rendering: auto;
}

2. Search your icon(s) on the Font Awesome websote https://fontawesome.com/icons?s=SOLID or for brands on https://fontawesome.com/icons?s=BRANDS

For example, a 'search' icon in your css

.fa-search:before {
    content: "\f002"
}

3. Then use the following in your html

<i class="fas fa-search"></i>

Upvotes: 1

Related Questions