Font Awesome official logo; a dark blue background with a lighter blue outline of a flag followed by the company's name in white text.

"Why are my Font Awesome icons failing to show?"

Or, how code libraries are always goalposts on the move

Your Font Awesome icons were displaying just fine before and, maybe, you could swear this may have happened before, but now your icons were supposed to be fixed, so what's going on? Why have your icons disappeared or aren't showing up at all now?

Font Awesome is a really cool external service that allows us access to a free library of icons to use with various types of blocks in SiteFarm. The problem you're experiencing arises when Font Awesome upgrades their library's version number and it gets ahead of the library version SiteFarm is configured to use. When that happens, you may first discover that your icon isn't displaying at all or that the icon name in the Font Awesome library has a different name or name structure than you've see before. If this happens to you, be sure to drop us a note at sitefarm@ucdavis.edu so we can investigate, but in the meanwhile, we have steps for you to use for an interim fix until we update our code to match the latest version supplied by Font Awesome.

Using Font Awesome's Version Selector to access the correct library version

  1. First, determine which version of the Font Awesome library is currently being used on your SiteFarm site by right-clicking anywhere on the screen and selecting your browser's Inspect or View source option.
  2. Search for the term 'fontawesome' in the code and look for a line that ends in '.css' as the library is loaded as an actual font style on your site. You'll be look for a link that looks like this: "https://use.fontawesome.com/releases/v5.10.1/css/all.css"
    Take note of the version number in this line as you'll need it as a reference for our next steps.
  3. Visit the Font Awesome free library using this direct link https://fontawesome.com/search?m=free or by clicking on Choose an Icon link provided in the Configure block » Focal link » Block styles section within the Focal Link block.
  4. When you arrive on the Font Awesome site, look immediately at the search bar located at the top of the page. On the right side of the search bar you'll notice a number that represents the most up-to-date version of the library available. It might look like 6.1.0 as in the screenshot below. 
    A screenshot of the Font Awesome site's library version drop-down menu options.
  5. Click on the down arrow to the right of the version number to access the drop-down menu's list of available versions. You will want to pick the version number that matches or is closest to SiteFarm's current version as indicated by the .css file you checked in Step 1. In the example above, you might select 5.15.4 to get as close as you can to the v5.10.1 version used in our code example.
    Font Awesome project diagram icon
    Once you've searched and filtered by the free version number, you can hover over the version number to see in what update this particular icon was added to Font Awesome's library.
  6. You can now search for the type of icon you want to use to see if it's still available in the free library version you've selected. If it is, you can copy its code name information as you have in the past or, if you're unfamiliar yet with the process, as it's described in the Focal Link block documentation.

Primary Category

Tags