Add Fontawesome Pro to WordPress

Did you score Font Awesome Pro and need to add it to your WordPress site? It is just three steps:

1. Login to Font Awesome
2. Visit https://fontawesome.com/get-started/web-fonts-with-css
3. Add a snippet to your theme functions file

1 First, make sure you are logged into your account at fontawesome.com.

2. Then visit https://fontawesome.com/get-started/web-fonts-with-css

to grab the CSS version. The js/svg version is supposed to be well… awesome but it is still in beta and rather a pain from what I can see to use. So for now, this is about the CSS collection.

You’ll need to select the versions you want from the selectors

and enter the website you intend to use the collection on and submit. You will then be shown the links to the cdn including your site’s hash. The links look like this:

<link rel=”stylesheet” href=”https://pro.fontawesome.com/releases/v5.0.8/css/fontawesome.css” integrity=”YOUR-HASH-WILL-BE-HERE” crossorigin=”anonymous”>

Copy all the links to your clipboard (there is a little clipboard icon on the right). It will take a few minutes to whitelist your site. But in the meantime, step 3.

3. Add this to your theme’s function file:

// Enqueue Font Awesome CSS
function hook_fa() {
?>
<!-- Insert all the links you copied from Font Awesome here -->

<?php
}
add_action('wp_head', 'hook_fa');

Once your site is whitelisted, you’re golden.

The last thing to know is that the font family is no longer just ‘FontAwesome’. Here is an example from the font awesome site using the pseudo elements in your stylesheet:

  .login::before {
    font-family: "Font Awesome 5 Pro";   content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands";  content: "\f099";
  }

Also, if you add Font Awesome to your html markup in an i tag, you may need to change fa to a more descriptive class like “fas” for the Solid library:

  <i class="fas fa-user"></i>
  <i class="far fa-user"></i>
  <!--brand icon-->
  <i class="fab fa-github-square"></i>

You can use the cheatsheet at https://fontawesome.com/cheatsheet/pro to see exactly which style library you are using or use the search engine at https://fontawesome.com/icons?d=gallery

Here is more info at Font Awesome:

https://fontawesome.com/how-to-use/web-fonts-with-css#pseudo-elements