Font Awesome

Getting Started with Font Awesome 5

Hey, thanks for supporting Font Awesome 5 and downloading a copy of our working project! The files in this folder are meant to serve as demos which show off all of the redesigned icons as well as how to use them.

Use Icons via SVG Framework

Level of difficulty to use: Easy & Recommended!

Our SVG Framework let's you reference icons just as you always have with Font Awesome and renders them as SVGs within your UI, complete with all of the supportive styling you know and love. This requires the use of JavaScript. Here's how to try it out:

  1. Grab the base Font Awesome loader at js/fontawesome.js.
  2. Grab one or more of the styles (ex: js/packs/solid.js) in the js/packs directory.
  3. Place these files in your project static files.
  4. Include them in the <head> of your document.
  5. Reference Font Awesome icons (using the inventory for easy copying/pasting) in the <body> of your document.

Example:

<head> <script defer src="/js/packs/solid.js"></script> <script defer src="/js/fontawesome.js"></script> </head> <body> <i class="fa fa-user"></i> </body>

Example with multiple styles:

<head> <script defer src="/js/packs/light.js"></script> <script defer src="/js/packs/regular.js"></script> <script defer src="/js/fontawesome.js"></script> </head> <body> <i class="fal fal-user"></i> <i class="far far-magic"></i> </body>

Need another example? Check out the SVG Framework demo.

Use via Web Font

Level of difficulty to use: Easy

A Font Awesome traditionalist? We get ya. Font Awesome 5 still let's you load your icons as a custom icon font (using CSS's @font-face). Here's how:

  1. Grab the base Font Awesome icon font supporting styling at css/font-awesome-core.css
  2. Grab one or more of the style CSS files (ex. css/font-awesome-light.css) in the css/ directory.
  3. Grab the corresponding web font files (ex. webfonts/fontawesome-light-300.woff2) in the webfonts/ directory.
  4. Place these files in your project static files.
  5. Include a reference to the CSS files in the <head> of your document.
  6. Reference Font Awesome icons (using the inventory for easy copying/pasting) in the <body> of your document.

Example:

<link rel="stylesheet" href="css/font-awesome-core.css"> <link rel="stylesheet" href="css/font-awesome-solid.css"> <body> <i class="fas fa-user"></i> </body>

Example with multiple styles:

<link rel="stylesheet" href="css/font-awesome-core.css"> <link rel="stylesheet" href="css/font-awesome-regular.css"> <link rel="stylesheet" href="css/font-awesome-light.css"> <body> <i class="fal fa-user"></i> <i class="far far-magic"></i> </body>

Need another example? Check out the Web Font demo.

Use Icons via SVG Sprites

Level of difficulty to use: Advanced

Want to use Font Awesome icons as SVGs in your project but want to do it without JavaScript or manage things more directly? We've prepped all of the icon styles as individual SVG sprites.

  1. Grab one of the sprite files (sprites/solid.svg) in the sprites directory.
  2. Place this file in your project static files.
  3. In the <body> of your document call an individual icon like this…

Example:

<body> <svg> <use xlink:href="solid.svg#user"></use> </svg> </body>

Need another example? Check out the SVG Sprites demo.

Cross-origin caveat: This requires that you are serving the sprite from the same domain and port as the page.

Serving locally: For this sprite to load you need to be serving it from http or https. If you try to open examples/svg-sprite.html from the file system (if your address begins with file://) it will fail to load.

Use Icons on the Desktop

Level of difficulty to use: Advanced

Want to use Font Awesome 5's icons in your favorite Desktop Design tools or on a print-based project? No problem. Here's how to get that started:

  1. Grab one or more of the web font files for the icon styles you want to use (ex. webfonts/fontawesome-light-300.ttf) in the webfonts/ directory.
  2. Add them to your Font Management Software (for Macs that often Font Book or Font Explorer X).
  3. Activate each added font you want to use in your applications.
  4. Open a file in a design application (ex. Sketch, Adobe Illustrator, etc.) and create a new text layer/area.
  5. Copy and paste the corresponding Font Awesome 5 glyph you want to add from the webfont demo (the litte version of the icon next to each icon's unicode value).

Or grab one or more of the svg files from any style (ex. svg/solid/user.svg) in the svg/ directory.

Questions? Comments? Feedback?

We're still in pre-alpha land with Font Awesome 5, so we need your help. Please provide feedback about this release specfically in our designated thread. Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out our contributing doc.