a97fbb34da
* How/When to upgrade from FA4 to FA5 #454 * Links to SVG files broken in the example files #456 * Misnamed icon names in examples #445 * Mangled HTML in the Getting Started example #442 * Bad grammar and typos #443 * fas-arrow-to-top is identical to fas-arrow-to-right #423 * Vertical alignment issues with webfont implementation #444 * Add browser compatibility tables to demo #435 * Remove MAC OS feces from builds #437 * TTF naming issues that prevent correct usage/installation #450 * Correct CSS for SVG framework stacking, was reversed from normal #452
593 lines
34 KiB
HTML
593 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Getting Started - Font Awesome 5</title>
|
|
|
|
<script defer src="../js/packs/light.js"></script>
|
|
<script defer src="../js/packs/regular.js"></script>
|
|
<script defer src="../js/packs/solid.js"></script>
|
|
<script defer src="../js/packs/brands.js"></script>
|
|
<script defer src="../js/fontawesome.js"></script>
|
|
|
|
<noscript>
|
|
<link rel="stylesheet" href="../css/font-awesome-core.css">
|
|
<link rel="stylesheet" href="../css/font-awesome-solid.css">
|
|
<link rel="stylesheet" href="../css/font-awesome-regular.css">
|
|
<link rel="stylesheet" href="../css/font-awesome-light.css">
|
|
<link rel="stylesheet" href="../css/font-awesome-brands.css">
|
|
</noscript>
|
|
|
|
<!-- font awesome team specific styling. ignore/replace with your own -->
|
|
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css">
|
|
<script src="https://use.fortawesome.com/349cfdf6.js"></script>
|
|
</head>
|
|
|
|
<body class="no-js min-vh-100 bg-gray1 gray7 ma0">
|
|
<div class="w-100" id="page-top">
|
|
<div class="mw9 center overflow-auto relative bg-near-white flex flex-column min-vh-100 shadow-wrap">
|
|
<div class="w-100 flex-grow-1 flex-shrink-none flex-basis-auto flex flex-column flex-row-ns flex-nowrap-ns">
|
|
<div class="bg-gray8 ph4 ph6-ns pv6 w-third-ns w-20-l br bw2 b--black-10 relative">
|
|
<h1 class="mt0 mb6 f4 tc">
|
|
<a href="https://fontawesome.com/" class="link white dib">
|
|
<i class="fa5 fa5-2x fa5-logo-o dib v-mid mr2 mr0-ns db-ns mb2-ns hover-blue4 link"></i>
|
|
<span class="f5 f4-m f5-l f5-xl fw6 sans-serif db-ns">Font Awesome</span>
|
|
</a>
|
|
</h1>
|
|
|
|
<nav>
|
|
<a href="index.html" class="db link blue4 tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns "><i class="fa5 fa5-flag-r fa5-lg"></i></span>
|
|
<span class="fw6">Getting Started</span>
|
|
</a>
|
|
<a href="inventory.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-book-r fa5-lg"></i></span>
|
|
<span class="fw6">All Icons</span>
|
|
</a>
|
|
<a href="recent.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-clock-r fa5-lg"></i></span>
|
|
<span class="fw6">Recently Added</span>
|
|
</a>
|
|
<a href="svg-framework.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-magic-r fa5-lg"></i></span>
|
|
<span class="fw6">SVG Framework</span>
|
|
</a>
|
|
<a href="svg-sprite.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-th-r fa5-lg"></i></span>
|
|
<span class="fw6">SVG Sprites</span>
|
|
</a>
|
|
<a href="webfont.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-font-r fa5-lg"></i></span>
|
|
<span class="fw6">Web Font</span>
|
|
</a>
|
|
|
|
<a href="https://github.com/FortAwesome/Font-Awesome-Pro" target="_blank" class="db link white o-80 glow tc-ns f3">
|
|
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-github fa5-2x"></i></span>
|
|
<span class="fw6">GitHub Project</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<a href="#page-top" class="dn db-ns link white o-40 glow absolute bottom-2 center-h">
|
|
<i class="fa5 fa5-arrow-to-top-r fa5-2x" title="Back to top of page"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="w-80-l">
|
|
<div role="alert" class="dt w-100 relative bb bw2 b--warning2 bg-warning1">
|
|
<div class="dtc v-mid w-1 pv4 pl4 pl6-ns warning5 tc">
|
|
<i class="fa5 fa5-exclamation-triangle fa5-2x" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="dtc v-mid pa4 br--right br2">
|
|
<p class="mv0 lh-copy"><strong class="fw7">Psst! These demos are for you, an official Supporter. Please don't distribute them to the general public</strong>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ph4 ph6-ns pv6">
|
|
|
|
<h1 class="mt0 mb4 b f6">
|
|
Getting Started with Font Awesome 5
|
|
</h1>
|
|
|
|
<p class="mt0 mb4 mb6-ns lh-copy f4 gray7">
|
|
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.
|
|
</p>
|
|
|
|
<section id="svg-framework" class="bt bw2 b--blue0 bg-white br2 br--bottom pa4 relative">
|
|
<h2 class="mt0 mb2 b f5">
|
|
Use Icons via SVG Framework
|
|
</h2>
|
|
|
|
<span class="absolute right-1 top--1 f1 b ttu tracked2 pa3 lh0 br4 bg-blue6 white">
|
|
<span class="sr-only">Level of difficulty to use:</span>
|
|
Easy & Recommended!
|
|
</span>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
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:
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab the base Font Awesome loader at <code class="blue4">js/fontawesome.js</code>.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab one or more of the styles (ex: <code class="blue4">js/packs/solid.js</code>) in the <code class="blue4">js/packs</code> directory.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Place these files in your project static files.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Include them in the <code class="blue4"><head></code> of your document.
|
|
</li>
|
|
<li class="lh-copy pl1">
|
|
Reference Font Awesome icons (using <a href="inventory.html" class="link underline color-inherit hover-blue4">the inventory</a> for easy copying/pasting) in the <code class="blue4"><body></code> of your document.
|
|
</li>
|
|
</ol>
|
|
|
|
|
|
<h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2"><span class="blue2"><head></span>
|
|
<span class="blue2"><script</span> <span class="blue4">defer src="</span>/js/packs/solid.js<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></script></span>
|
|
<span class="blue2"><script</span> <span class="blue4">defer src="</span>/js/fontawesome.js<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></script></span>
|
|
<span class="blue2"></head></span>
|
|
|
|
<span class="blue2"><body></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-user<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"></body></span></code>
|
|
</div>
|
|
|
|
<h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2"><span class="blue2"><head></span>
|
|
<span class="blue2"><script</span> <span class="blue4">defer src="</span>/js/packs/light.js<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></script></span>
|
|
<span class="blue2"><script</span> <span class="blue4">defer src="</span>/js/packs/regular.js<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></script></span>
|
|
<span class="blue2"><script</span> <span class="blue4">defer src="</span>/js/fontawesome.js<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></script></span>
|
|
<span class="blue2"></head></span>
|
|
<span class="blue2"><body></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>fal fa-user<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>far fa-magic<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"></body></span></code>
|
|
</div>
|
|
|
|
<p class="mt0 mb5 lh-copy pa4 br2 bg-blue0">Need another example? Check out the <a href="svg-framework.html" class="link blue4 underline-hover fw6">SVG Framework demo</a>.</p>
|
|
|
|
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
|
|
<div class="overflow-x-scroll">
|
|
<table class="collapse tl mv0 lh-copy dt-fixed overflow-scroll" summary="browser compatibility for SVG Framework method of using Font Awesome 5">
|
|
<thead>
|
|
<tr class="bb bw2 b--gray1">
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Platform</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Edge</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">IE</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Chrome</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Firefox</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Safari</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Opera</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Yandex</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb bw1 b--gray1 v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Desktop
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions (11, 10)
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3">
|
|
14
|
|
</td>
|
|
</tr>
|
|
<tr class="v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Mobile
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS 9, 10
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
|
|
|
<section id="webfont" class="bt bw2 b--green0 bg-white br2 br--bottom pa4 relative">
|
|
<h2 class="mt0 mb2 b f5">Use via Web Font</h2>
|
|
|
|
<span class="absolute right-1 top--1 f1 b ttu tracked2 pa3 lh0 br4 bg-green6 white">
|
|
<span class="sr-only">Level of difficulty to use:</span>
|
|
Easy
|
|
</span>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
A Font Awesome traditionalist? We get ya. Font Awesome 5 still lets you load your icons as a custom icon font (using CSS's <code class="blue4">@font-face</code>). Here's how:
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab the base Font Awesome icon font supporting styling at <code class="blue4">css/font-awesome-core.css</code>
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab one or more of the style CSS files (ex. <code class="blue4">css/font-awesome-light.css</code>) in the <code class="blue4">css/</code> directory.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab the corresponding web font files (ex. <code class="blue4">webfonts/fontawesome-light-300.woff2</code>) in the <code class="blue4">webfonts/</code> directory.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Place these files in your project static files.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Include a reference to the CSS files in the <code class="blue4"><head></code> of your document.
|
|
</li>
|
|
<li class="lh-copy pl1">
|
|
Reference Font Awesome icons (using <a href="inventory.html" class="link underline color-inherit hover-blue4">the inventory</a> for easy copying/pasting) in the <code class="blue4"><body></code> of your document.
|
|
</li>
|
|
</ol>
|
|
|
|
<h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2"><span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">></span>
|
|
<span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-solid.css<span class="blue4">"</span><span class="blue2">></span>
|
|
|
|
<span class="blue2"><body></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>fas fa-user"<span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"></body></span></code>
|
|
</div>
|
|
|
|
<h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2"><span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">></span>
|
|
<span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-regular.css<span class="blue4">"</span><span class="blue2">></span>
|
|
<span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-light.css<span class="blue4">"</span><span class="blue2">></span>
|
|
|
|
<span class="blue2"><body></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>fal fa-user<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"><i</span> <span class="blue4">class="</span>far fa-magic<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"></body></span></code>
|
|
</div>
|
|
|
|
<p class="mt0 mb5 lh-copy pa4 br2 bg-green0">Need another example? Check out the <a href="webfont.html" class="link blue4 underline-hover fw6">Web Font demo</a>.</p>
|
|
|
|
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
|
|
<div class="overflow-x-scroll">
|
|
<table class="collapse tl mv0 lh-copy dt-fixed overflow-scroll" summary="browser compatibility for Web Font method of using Font Awesome 5">
|
|
<thead>
|
|
<tr class="bb bw2 b--gray1">
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Platform</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Edge</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">IE</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Chrome</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Firefox</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Safari</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Opera</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Yandex</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb bw1 b--gray1 v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Desktop
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 3 major versions (11, 10, 9)
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3">
|
|
14
|
|
</td>
|
|
</tr>
|
|
<tr class="v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Mobile
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS 9, 10
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
|
|
|
<section id="svg-sprites" class="bt bw2 b--red0 bg-white br2 br--bottom pa4 relative">
|
|
<h2 class="mt0 mb2 b f5">Use Icons via SVG Sprites</h2>
|
|
|
|
<span class="absolute right-1 top--1 f1 b ttu tracked2 pa3 lh0 br4 bg-red5 white">
|
|
<span class="sr-only">Level of difficulty to use:</span>
|
|
Advanced
|
|
</span>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
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.
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab one of the sprite files (<code class="blue4">sprites/solid.svg</code>) in the <code class="blue4">sprites</code> directory.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Place this file in your project static files.
|
|
</li>
|
|
<li class="lh-copy pl1">
|
|
In the <code class="blue4"><body></code> of your document call an individual icon like this…
|
|
</li>
|
|
</ol>
|
|
|
|
<h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2"><span class="blue2"><body></span>
|
|
<span class="blue2"><svg></span>
|
|
<span class="blue2"><use</span> <span class="blue4">xlink:href="</span>solid.svg#user<span class="blue4">"</span><span class="blue2">></use></span>
|
|
<span class="blue2"></svg></span>
|
|
<span class="blue2"></body></span></code>
|
|
</div>
|
|
|
|
<p class="mt0 mb5 lh-copy pa4 br2 bg-red0">Need another example? Check out the <a href="svg-sprite.html" class="link blue4 underline-hover fw6">SVG Sprites demo</a>.</p>
|
|
|
|
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
|
|
<div class="overflow-x-scroll">
|
|
<table class="collapse tl mv0 lh-copy dt-fixed overflow-scroll" summary="browser compatibility for SVG Sprites method of using Font Awesome 5">
|
|
<thead>
|
|
<tr class="bb bw2 b--gray1">
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Platform</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Edge</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">IE</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Chrome</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Firefox</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Safari</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Opera</th>
|
|
<th scope="col" class="pv3 pr4 fw6 gray5 v-bottom">Yandex</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb bw1 b--gray1 v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Desktop
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4 danger6">
|
|
No*
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
last 2 major versions
|
|
</td>
|
|
<td class="pv3">
|
|
14
|
|
</td>
|
|
</tr>
|
|
<tr class="v-top">
|
|
<th scope="row" class="pv3 pr4 gray5">
|
|
Mobile
|
|
</th>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS latest <br />
|
|
Android 6, 5, 4
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
iOS 9, 10
|
|
</td>
|
|
<td class="pv3 pr4">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
<td class="pv3">
|
|
<abbr class="gray5" title="Not applicable">N/A</abbr>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mv4 f2">
|
|
<p class="mv0 lh-copy"><span class="danger6">*</span> IE will not automatically download SVG documents referenced with <code class="blue4">xlink:href</code></p>
|
|
</div>
|
|
|
|
<h3 class="mt0 mb2 f3 fw6">Cross-origin caveat</h3>
|
|
<p class="mt0 mb4 lh-copy gray7">This requires that you are serving the sprite from the same domain and port as the page.</p>
|
|
|
|
<h3 class="mt0 mb2 f3 fw6">Serving locally</h3>
|
|
<p class="mv0 lh-copy gray7">For this sprite to load you need to be serving it from http or https. If you try to open <code class="blue4">examples/svg-sprite.html</code> from the file system (if your address begins with <code class="blue4">file://</code>) it will fail to load.</p>
|
|
</section>
|
|
|
|
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
|
|
|
<section id="desktop" class="bt bw2 b--red0 bg-white br2 br--bottom pa4 relative">
|
|
<h2 class="mt0 mb2 b f5">Use Icons on the Desktop</h2>
|
|
|
|
<span class="absolute right-1 top--1 f1 b ttu tracked2 pa3 lh0 br4 bg-red5 white">
|
|
<span class="sr-only">Level of difficulty to use:</span>
|
|
Advanced
|
|
</span>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
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:
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy pl1 mb3">
|
|
Grab one or more of the web font files for the icon styles you want to use (ex. <code class="blue4">webfonts/fontawesome-light-300.ttf</code>) in the <code class="blue4">webfonts/</code> directory.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Add them to your Font Management Software (for Macs that often Font Book or Font Explorer X).
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Activate each added font you want to use in your applications.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Open a file in a design application (ex. Sketch, Adobe Illustrator, etc.) and create a new text layer/area.
|
|
</li>
|
|
<li class="lh-copy pl1">
|
|
Copy and paste the corresponding Font Awesome 5 glyph you want to add from the <a href="webfont.html" class="link underline color-inherit hover-blue4">webfont demo</a> (the little version of the icon next to each icon's unicode value).
|
|
</li>
|
|
</ol>
|
|
|
|
<p class="mv0 lh-copy gray7">Or grab one or more of the svg files from any style (ex. <code class="blue4">svg/solid/user.svg</code>) in the <code class="blue4">svg/</code> directory.</p>
|
|
</section>
|
|
|
|
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
|
|
|
<section id="upgrading" class="bg-white br2 pa4 relative">
|
|
<h2 class="mt0 mb2 b f5">Upgrading from Font Awesome Version 4</h2>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
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:
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy pl1 mb3">
|
|
Remove the files associated with Font Awesome Version 4 from your project - including the <code class="blue4">fontawesome/</code> folder of web fonts and CSS/SCSS/LESS (if you're using <a class="link underline color-inherit hover-blue4" href="https://cdn.fontawesome.com/" target="_blank">Font Awesome's CDN</a>, you can skip this step.)
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
<p class="mt0 mb2 lh-copy">Remove the reference to Font Awesome V4's JS or CSS from the <code class="blue4"><head></code> of your document.</p>
|
|
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2"><link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>path/to/font-awesome-v4/css/font-awesome.min.css<span class="blue4">"</span><span class="blue2">></span></code>
|
|
</div>
|
|
|
|
<div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
|
|
<code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2"><script</span> <span class="blue4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="blue4">"</span><span class="blue2"></script></span></code>
|
|
</div>
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Pick your method of using Font Awesome 5: <a href="#svg-framework" class="link underline color-inherit hover-blue4">SVG Framework</a>, <a href="#webfont" class="link underline color-inherit hover-blue4">Web Font Framework</a>, or <a href="#svg-sprites" class="link underline color-inherit hover-blue4">SVG Sprite</a>.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Follow the instructions and example code + demos for the method you've chosen.
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Find and replace any icons that have different names between V4 and V5 (with SVG Sprites, you'll need to change the syntax of every icon's reference more drastically + provide your own styling to support how they look).
|
|
</li>
|
|
<li class="lh-copy pl1">
|
|
Update or remove any custom styling you've added around Font Awesome icons (if applicable).
|
|
</li>
|
|
<li class="lh-copy pl1 mb3">
|
|
Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with pre-alphas).
|
|
</li>
|
|
</ol>
|
|
|
|
<div role="alert" class="dt w-100 mb4 relative">
|
|
<div class="dtc v-top w-1 pv4 ph3 bg-warning5 warning0 br--left br2 tc">
|
|
<i class="fa5 fa5-exclamation-triangle fa5-lg animated infinite pulseOpacity animated3" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="dtc v-top pa3 bg-warning0 br--right br2">
|
|
<h3 class="mt0 mb2 lh-copy f3 b">Heads up! We're still working on getting to complete parity between V4 and V5</h3>
|
|
<p class="mv0 lh-copy">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.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
|
|
|
<section id="feedback">
|
|
<h2 class="mt0 mb2 b f5">Questions? Comments? Feedback?</h2>
|
|
|
|
<p class="mt0 mb4 lh-copy gray7">
|
|
We're still in pre-alpha land with Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/433" class="link underline color-inherit hover-blue4 fw6" target="_blank">feedback about this release specifically in our designated thread</a>. Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out <a href="https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/CONTRIBUTING.md" class="link underline color-inherit hover-blue4 fw6" target="_blank">our contributing doc</a>.
|
|
</p>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|