Font Awesome is awesome

Daniel Park
Jul 30, 2017 · 2 min read

Font Awesome is a collection of stylish icons that can easily be used by either using a CDN or by downloading the entire directory into your project. There are currently 675 icons to choose from. The collection can be found here.

The icons are vectors so they look great in any resolution.

CDN

Insert this code in your HTML’s <head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

or Download

You can also download the entire directory into your project. You can either use the default styling or manually customize the icons yourself. The link for the download can be found here.

In the <head> of your html, reference the location to your font-awesome.min.css.

<link rel="stylesheet" href="styles/font-awesome-4.7.0/css/font-awesome.min.css">

Implementation

It’s amazing how easy it is to incorporate these icons into your app. All you need to do is name your class after the icon name like this:

<i class="fa fa-slack"></i>

Styling

You can apply styling just how you would for texts.

.fa {
font-size: 10em;
color: #ff6f69;
padding: 20px;
border: 3px solid #96ceb4;
border-radius: 25px;
}

Extensions

You can also find more fonts at font-mfizz.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade