How to add font awesome icons to a website
Introduction
Section titled “ 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
Section titled “ How To”Self-hosting Font Awesome using the web fonts + CSS
Section titled “Self-hosting Font Awesome using the web fonts + CSS”I prefer self-hosting Font Awesome using the Web Fonts + CSS method.
-
Download the icons
Section titled “Download the icons”Download the
For The Webzip file from this page by clicking theFree For Webbutton. -
Add the Font Awesome files to your project
Section titled “Add the Font Awesome files to your project”Follow the instructions from this page. Or see below for Astro Starlight and Jekyll:
- Copy the stylesheet
css/all.min.csstosrc/styles - Copy the webfonts to
src/webfonts - Add the following to
astro.config.mjs:
customCss: ['./src/styles/all.min.css'],- Copy the stylesheet
css/all.min.csstoassets/css - Copy the webfonts to
assets/webfonts - Add the following to
_includes/head.html:
<link href="/assets/css/all.min.css" rel="stylesheet"> - Copy the stylesheet
-
Add the code to display an icon
Section titled “Add the code to display an icon”Use the following code:
<i class='fa fa-home'></i>
Setup with an external source
Section titled “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>
No comments found for this note.
Join the discussion for this note on Github. Comments appear on this page instantly.