Getting Started and Installation

Installation

Installing Ficons can be done in several ways. The easiest is using the Ficons CDN link as shown below, but an NPM package and ZIP download are available as well.

Font Awesome Replacement
Ficons is meant as a drop-in replacement for Font Awesome, so if you are using Ficons you likely do NOT need to use Font Awesome as well.

Ficons CDN

The easiest way to get Ficons on your website or app is via CDN. Install Ficons
from scratch or replace font awesome icons with just a single line of code. No
downloading or installing!

Copy Embed Code

Copy the Embed Code and place it in your project’s HTML files. You’ll want to
add this within the <head> of each template or page that you want to use
Ficons on.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ficons/font.css" rel="stylesheet">

Use any of the 600+ Ficons

Find and place the right icon for the job in your markup. Check out the 600+ Ficons page for reference.

Download and Customize

Want to manage and host Ficons assets yourself? You can download, customize, and
use the icons and default styling manually.

Download Ficons

Copy the entire ficons directory into your project.
In the <head> of your html, reference the location to your ficons.min.css.
Example:

<!doctype html>
<html>
  <head>
    ...
    <!-- TODO: Place your Ficons embed code  -->
    <link rel="stylesheet" href="path/to/ficons/css/ficons.min.css">
    ...
  </head>
  <body>
    ...
    <!-- reference any Ficon you'd like -->
    <i class="fa fa-magic"></i>
    ...
  </body>
</html>

Icons Reference

Getting Started and Installation

Installation

Ficons CDN

Download and Customize