freeCodeCamp
Font Awesome is a convenient library of icons. These icons can be vector graphics stored in the .svg file format or web fonts.
These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
To include Font Awesome in your app or page, just add the following code to the element at the top of your HTML:
link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous"> The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for example:
i class="fas fa-info-circle"> i> Note that the span element is also acceptable for use with icons.
Here's how you add an icon:
i class="fas fa-thumbs-up"> i> This will produce a simple thumbs up icon:
And here's how you would insert that icon onto a button:
button> i class="fas fa-thumbs-up"> i> Like button> Notice that there are two parts to using an icon, the style prefix and the icon name. In the example above, the style prefix and icon name are fas and fa-thumbs-up , respectively.
Font Awesome offers the following style prefixes:
| Style | Style Prefix | Plan Type |
| Solid | fas | Free |
| Regular | far | Pro |
| Light | fal | Pro |
| Duotone | fad | Pro |
| Brands | fab | Free |
Brand icons are often submitted by the company itself, and are useful for building things like buttons for social authentication or payment. These icons include Twitter, Facebook, Spotify, Apple, and even freeCodeCamp:
i class="fab fa-free-code-camp"> i> While you'll only have access to solid and brand icons under the free plan, there are still many ways to style them.
For simple applications, you could use inline styles:
span style="font-size: 3em; color: Tomato;"> i class="fas fa-thumbs-up"> i> span> For sizing, you could also use Font Awesome's built in keywords:
i class="fas fa-thumbs-up fa-xs"> i> i class="fas fa-thumbs-up fa-sm"> i> i class="fas fa-thumbs-up fa-lg"> i> i class="fas fa-thumbs-up fa-2x"> i> i class="fas fa-thumbs-up fa-3x"> i> i class="fas fa-thumbs-up fa-5x"> i> i class="fas fa-thumbs-up fa-7x"> i> i class="fas fa-thumbs-up fa-10x"> i> 
An important thing to remember is that FA icons inherit the font-size of the parent container. This means that the icons scale with any text that might be used with them, which keeps the design consistent.
For example, say you want to create several buttons. The default size for the buttons is quite small, so you write some CSS to increase the size of the buttons, along with the text and icons within them:
button> i class="fas fa-thumbs-up"> i> Like button> button> i class="fas fa-thumbs-down"> i> Dislike button> button> i class="fas fa-share"> i> Share button> button < font-size: 1.5em; margin: 5px; > 
You can also adjust an icon's size directly by targeting the icon itself and adjusting its font-size .
Font Awesome is, well, awesome! As the most popular icon toolkits, it's easy to include and use in all of your projects. Now go on icon up all the things.
