fontawesome
setup | web use | icon building

/ DesignAssets, Design - more cheats, SprUng, coding cheat, PLUGINS, Websites - more cheats, wordpress - more cheats / 72 minutes of reading

To reference an icon, you need to know two bits of information.
1) its name, prefixed with fa- (meaning “font
awesome” naturally!)
and 2) the style you want to use’s corresponding prefix**.


    <i class="fas fa-camera" /i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
	
    <i class="fas fa-camera" /i> <!-- using an ielement to reference the icon -->
	
    <span class="fas fa-camera"> </span> <!-- using a >span< element to reference the icon
    -->

Style Availability Style Prefix Example Rendering

Solid Free fas >i class=”fas fa-camera”<>/i<
Regular Pro Required far >i class=”far fa-camera”/i<
Light Pro Required fal >i class=”fal fa-camera”/i<
Duotone Pro Required fad >i class=”fad fa-camera”/i<
Brands Free fab >i class=”fab fa-font-awesome”/i<
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for
brands.

Using CSS Pseudo-elements with Our SVG + JS Framework

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

https://codepen.io/fontawesome/pen/WVEobv

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

Enable Pseudo-elements
Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the<script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.

Set Pseudo-elements’ display to none
Since our JS will find each icon reference (using your pseudo-element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo-element that’s rendered.

pseudo-and-svg+js.html

<html>
  <head>
    <script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></script>

    <style>
      .icon::before {
        display: none;
      }

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

      .tps::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1ea";
      }
    </style>
  </head>
  <body>
    <ul style="margin: 0;">
      <li><span class="icon login"></span> Login</li>
      <li><span class="icon tps"></span> TPS Reports</li>
    </ul>
  </body>
</html>

 

 

See it in Action!

We know this can be tough to get. Here’s a Codepen demo showing how to render icons via CSS Pseudo-elements with our SVG + JS Framework.

Using CSS Pseudo-elements with Uploaded Icons

You can add your uploaded icons to your designs using pseudo-elements, but you’ll need to take a couple of different steps.

Get the Unicode Value
Go to the Uploaded Icons page of your kit, open up the details of the icon you want to use, and copy the unicode value.

Reference the Unicode and Kit Font Family
Set the font to font-family: "Font Awesome Kit" and use that unicode in your CSS along with the regular settings for using Font Awesome pseudo-elements, like this:

your.css

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.custom-icon::before {
  font-family: "Font Awesome Kit";
  content: "\e001"; /* change to your icon's unicode value */
  /* font-weight isn't needed */
}

 

Support for Dynamic Changes

Let’s get a little cute with it by using some JavaScript and jQuery to toggle the class of an element.

<script>
  setInterval(function () {
    $('.ninety-four').toggleClass('arrow')
  }, 1000)
</script>

<style>
  .ninety-four::after {
    margin-left: 0.25em;
    font-size: 2em;
    vertical-align: middle;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c8";
  }

  .ninety-four.arrow::after {
    content: "\f152";
  }
</style>

<a class="ninety-four" href="https://en.wikipedia.org/wiki/Blink_element">Hey, do you remember the blink tag?</a>

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself






<!– using an element to reference the icon –>
<!– using a element to reference the icon –>

What’s in the Download?

The web-focused Font Awesome Package contains the following directories and files:

Files & Folders What They Are Where You Should Start
/css Stylesheets for Web Fonts all.css
/js SVG with JavaScript all.js
/less Less pre-processor fontawesome.less
/scss Sass pre-processor fontawesome.scss
/sprites SVG sprites solid.svg
/svgs Individual SVG for each icon individual *.svg icons
/webfonts Web Font files used with CSS See /css

Using Web Fonts with CSS

The /css/all.css file contains the core styling plus all of the icon styles that you’ll need
when using Font Awesome. The /webfonts folder contains all of the typeface files that the
above CSS references and depends on.

Copy the entire /webfonts folder and the /css/all.css into your project’s
static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

Add a reference to the copied /css/all.css file into the <head> of each
template or page that you want to use Font Awesome on.

page.html

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

 

 

Using a CSS Pre-Processor?

Using the /scss or /less versions of Font Awesome we’ve bundled in the
download? Check out our Sass
and Less docs for details on
their contents. Once you’ve compiled them into CSS, you can follow the CSS-focused steps noted here to
handle hosting and referencing icons.

Using SVG with JavaScript

The /js/all.js loads all of the base features, plus all of the icon styles that you’ll need
when using Font Awesome. Copy it into your project’s static assets directory (or where ever you prefer
to keep front end assets or vendor stuff).

Add a reference to the copied /js/all.js file within the <head> of each
template or page that you want to use Font Awesome on.

template.html

<head>
  <script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

 

 

Double-Check Your Paths

Since you’re managing all of the downloaded files yourself, make sure the references in your pages’
<head> are accurate with where you’ve moved all of Font Awesome’s files in your
project.

Using Just Certain Styles

Want to use just certain styles of icons when using our Web Fonts with CSS framework?
The /css folder contains the core styling and additional files for all of Font Awesome’s
style options – solid, regular, light, and brands. The /webfonts folder contains
all of the typeface files that the above CSS references and depends on.

Icon Style Web Font Filename CSS Filename Availability
Font Awesome
Brands		 fa-brands-400.* brands.css Free
Font Awesome
Solid		 fa-solid-900.* solid.css Free
Font Awesome
Regular		 fa-regular-400.* regular.css Pro only
Font Awesome
Light		 fa-light-300.* light.css Pro only

Copy both the /webfonts and the /css folders into your project’s static assets
directory (or where ever you prefer to keep front end assets or vendor stuff). You can remove any
styles’ .css and web font files you don’t plan on using if you’d like.

Add a reference to the core styling file (/css/fontawesome.css) and the CSS for individual
styles (e.g. /css/brands.css) into the <head> of each template or page
that you want to use Font Awesome on. Pay attention to the pathing of your project and where you moved
the files to in the previous step.

using-certain-styles.html

<head>
  <!-- Our project just needs Font Awesome Solid + Brands -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>

 

 

Mind the Paths in Web Fonts

We recommend keeping the /webfonts and /css folders in the same directory. If
you don’t, you’ll need to change the path to the web fonts mentioned in each style’s CSS file.

Want use only certain styles when using our SVG with JS framework? The /js
folder contains the core styling and additional files for all of Font Awesome’s style options – solid, regular, light, and brands.

Icon Style JS Filename Availability
Font Awesome
Brands		 brands.js Free
Font Awesome
Solid		 solid.js Free
Font Awesome
Regular		 regular.js Pro only
Font Awesome
Light		 light.js Pro only

Copy the fontawesome.js loader and whatever icon styles’ .js files you’d like
to use into your project’s static assets directory (or where ever you prefer to keep front end assets or
vendor stuff). We recommend referencing the fontawesome.js loader last.

using-certain-styles.html

<head>
  <!-- Our project just needs Font Awesome Solid + Brands -->
  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>

 

 

Double-Check Your Paths

Since you’re managing all of the downloaded files yourself, make sure the references in your pages’
<head> are accurate with where you’ve moved all of Font Awesome’s files in your
project.

Next Steps

With the references complete, you can now start referencing
icons in your templates or pages’ <body> and then check out all of the styling support we
pack into those supporting files you’ve loaded.

 

Scroll to Top