Skip to content
Fiction Becomes Fact

How to add font awesome icons to a website

- Last update:

Introduction

Font Awesome provides a great icon library. It is very easy to use on any website and the free set of icons is sufficient for me. I used the icons in combination with Jekyll in the past and now as a supplement to the icons of Astro Starlight (which this website was built with).

How To

Self-hosting Font Awesome using the web fonts + CSS

I prefer self-hosting Font Awesome using the Web Fonts + CSS method.

  1. Download the icons

    Download the For The Web zip file from this page by clicking the Free For Web button.

  2. Add the Font Awesome files to your project

    Follow the instructions from this page. Or see below for Astro Starlight and Jekyll:

    1. Copy the stylesheet css/all.min.css to src/styles
    2. Copy the webfonts to src/webfonts
    3. Add the following to astro.config.mjs:
    customCss: [
      './src/styles/all.min.css'
    ],
  3. Add the code to display an icon

    Use the following code:

    <i class='fa fa-home'></i>

Setup with an external source

I found out that it can be very simple to use the icons of Font Awesome.

Just add the following stylesheet to the head of your website:

<!-- Jekyll: _includes/head.html -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Now you can display an icon with the following code:

<i class='fa fa-home'></i>

Favorites

Font Awesome Docs

Comments

    No comments found for this note.

    Join the discussion for this note on Github. Comments appear on this page instantly.

    Tags:
    Copyright 2021- Fiction Becomes Fact