Psst! These demos are for you, an official Supporter. Please don't distribute them to the general public.
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.
From the beginning Font Awesome has always focused on making things easy for you. With version 5 we've completely re-thought how we do things. We're introducing the new JavaScript-based SVG Framework and also including an SVG sprite for each style. Here are all of your options.
The same battle-tested and reliable way Font Awesome has worked from the beginning.
Uses the ridiculously flexible and powerful scalable vector graphics format (SVG).
Clean, simple, and the perfect foundation for advanced users willing to do some work.
Our SVG Framework lets 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:
/js/fontawesome.js
.
/js/packs/solid.js
) in the /js/packs
directory.
<head>
of your document.
<body>
of your document.
Need another example? Check out the SVG Framework demo.
Need Font Awesome 4 icon names that are missing in 5? Learn how to shim using the JavaScript version.
Platform | Edge | IE | Chrome | Firefox | Safari | Opera | Yandex |
---|---|---|---|---|---|---|---|
Desktop | last 2 major versions | last 2 major versions (11, 10) | last 2 major and business versions | last 2 major and ESR versions | last 2 major versions | last 2 major versions | 14 |
Mobile | N/A | N/A |
iOS latest Android 6, 5, 4 |
iOS latest Android 6, 5, 4 |
iOS 9, 10 | N/A | N/A |
A Font Awesome traditionalist? We get ya. Font Awesome 5 still lets you load your icons as a custom icon font (using CSS's @font-face
). Here's how:
/css/fontawesome-pro-core.css
/css/fontawesome-pro-light.css
) in the /css
directory.
/webfonts/fontawesome-pro-light-300.woff2
) in the /webfonts
directory.
<head>
of your document.
<body>
of your document.
Need another example? Check out the Web Font demo.
Platform | Edge | IE | Chrome | Firefox | Safari | Opera | Yandex |
---|---|---|---|---|---|---|---|
Desktop | last 2 major versions | last 3 major versions (11, 10, 9) | last 2 major and business versions | last 2 major and ESR versions | last 2 major versions | last 2 major versions | 14 |
Mobile | N/A | N/A |
iOS latest Android 6, 5, 4 |
iOS latest Android 6, 5, 4 |
iOS 9, 10 | N/A | N/A |
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.
/sprites/solid.svg
) in the /sprites
directory.
<body>
of your document call an individual icon like this…
Need another example? Check out the SVG Sprites demo.
Platform | Edge | IE | Chrome | Firefox | Safari | Opera | Yandex |
---|---|---|---|---|---|---|---|
Desktop | last 2 major versions | No* | last 2 major and business versions | last 2 major and ESR versions | last 2 major versions | last 2 major versions | 14 |
Mobile | N/A | N/A |
iOS latest Android 6, 5, 4 |
iOS latest Android 6, 5, 4 |
iOS 9, 10 | N/A | N/A |
* IE will not automatically download SVG documents referenced with xlink:href
This requires that you are serving the sprite from the same domain and port as the page.
For this sprite to load you need to be serving it from http or https. If you try to open docs/svg-sprite.html
from the file system (if your address begins with file://
) it will fail to load.
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:
/webfonts/fontawesome-pro-light-300.ttf
) in the /webfonts
directory.
Or grab one or more of the svg files from any style (ex. /svg/solid/user.svg
) in the /svg
directory.
For those that are super-stoked to start using version 5, you can upgrade the version of Font Awesome you're using on a site or project. Below are the basic steps we recommend following:
fontawesome/
folder of web fonts and CSS/SCSS/LESS (if you're using Font Awesome's CDN, you can skip this step.)
Remove the reference to Font Awesome V4's JS or CSS from the <head>
of your document.
<link rel="stylesheet" href="path/to/font-awesome-v4/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/your-embed-code.js"></script>
Not all icons and aliases from V4 are the same in V5. So what's changed?
fab
-o
now has a prefix of far
and no -o
suffixWe know that these changes can really slow you down in adopting V5. To help out we've created a shim file if you decide to use the JavaScript method. You can use the old names and aliases and it will automatically convert things for you as your icons get replaced with SVG icons.
We're working on a release candidate of Font Awesome 5, so we need your help. Please provide feedback about this release specifically in our designated thread. Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out our contributing doc.