- 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: + 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 another example? Check out the SVG Framework demo.
+ +| Platform | +Edge | +IE | +Chrome | +Firefox | +Safari | +Opera | +Yandex | +
|---|---|---|---|---|---|---|---|
| + Desktop + | ++ last 2 major versions + | ++ last 2 major versions (11, 10) + | ++ last 2 major versions + | ++ last 2 major 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 let's you load your icons as a custom icon font (using CSS's @font-face). Here's how:
+ 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/font-awesome-core.css
css/font-awesome-light.css) in the css/ directory.
webfonts/fontawesome-light-300.woff2) in the webfonts/ directory.
<head> of your document.
<body> of your document.
Need another example? Check out the Web Font demo.
+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 versions + | ++ last 2 major 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 + | +
sprites/solid.svg) in the sprites directory.
<body> of your document call an individual icon like this…
<body>
<svg>
- <use xlink:href="solid.svg#user"></use>
+ <use xlink:href="solid.svg#user"></use>
</svg>
</body>
Need another example? Check out the SVG Sprites demo.
+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.
+| Platform | +Edge | +IE | +Chrome | +Firefox | +Safari | +Opera | +Yandex | +
|---|---|---|---|---|---|---|---|
| + Desktop + | ++ last 2 major versions + | ++ No* + | ++ last 2 major versions + | ++ last 2 major 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
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.
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 examples/svg-sprite.html from the file system (if your address begins with file://) it will fail to load.
webfonts/fontawesome-light-300.ttf) in the webfonts/ 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 have made it to V5 yet. You'll want to double-check your pages and views to make sure the icons you need are in V5. If not, you may want to stick with 4 in the meantime.
+- 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. + We're still in pre-alpha land with 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.