Release 5.0.0-alpha2 (#457)
* 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
This commit is contained in:
Rob Madole
GitHub
@@ -24,11 +24,11 @@
|
||||
<!-- 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->
|
||||
</headjs min-vh-100 bg-gray1 gray7 ma0">
|
||||
<body class="no-js min-vh-100 bg-gray1 gray7 ma0">
|
||||
<div class="w-100" id="page-top">
|
||||
<div class="mw9 center overflow-hidden relative bg-near-white flex flex-column min-vh-100 shadow-wrap">
|
||||
<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">
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<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 warning6 tc">
|
||||
<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">
|
||||
@@ -106,23 +106,23 @@
|
||||
</span>
|
||||
|
||||
<p class="mt0 mb4 lh-copy gray7">
|
||||
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:
|
||||
</p>
|
||||
|
||||
<ol class="mt0 mb4 pl3 list-position-outside">
|
||||
<li class="lh-copy mb3">
|
||||
<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 mb3">
|
||||
<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 mb3">
|
||||
<li class="lh-copy pl1 mb3">
|
||||
Place these files in your project static files.
|
||||
</li>
|
||||
<li class="lh-copy mb3">
|
||||
<li class="lh-copy pl1 mb3">
|
||||
Include them in the <code class="blue4"><head></code> of your document.
|
||||
</li>
|
||||
<li class="lh-copy">
|
||||
<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>
|
||||
@@ -148,12 +148,86 @@
|
||||
<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 fal-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 far-magic<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></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="mv0 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>
|
||||
<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">
|
||||
@@ -167,26 +241,26 @@
|
||||
</span>
|
||||
|
||||
<p class="mt0 mb4 lh-copy gray7">
|
||||
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 <code class="blue4">@font-face</code>). 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 <code class="blue4">@font-face</code>). Here's how:
|
||||
</p>
|
||||
|
||||
<ol class="mt0 mb4 pl3 list-position-outside">
|
||||
<li class="lh-copy mb3">
|
||||
<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 mb3">
|
||||
<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 mb3">
|
||||
<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 mb3">
|
||||
<li class="lh-copy pl1 mb3">
|
||||
Place these files in your project static files.
|
||||
</li>
|
||||
<li class="lh-copy mb3">
|
||||
<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">
|
||||
<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>
|
||||
@@ -209,11 +283,85 @@
|
||||
|
||||
<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 far-magic<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="blue2"></body></span></code></code>
|
||||
<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="mv0 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>
|
||||
<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">
|
||||
@@ -231,13 +379,13 @@
|
||||
</p>
|
||||
|
||||
<ol class="mt0 mb4 pl3 list-position-outside">
|
||||
<li class="lh-copy mb3">
|
||||
<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 mb3">
|
||||
<li class="lh-copy pl1 mb3">
|
||||
Place this file in your project static files.
|
||||
</li>
|
||||
<li class="lh-copy mb3">
|
||||
<li class="lh-copy pl1">
|
||||
In the <code class="blue4"><body></code> of your document call an individual icon like this…
|
||||
</li>
|
||||
</ol>
|
||||
@@ -246,16 +394,96 @@
|
||||
<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 class="blue2">></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 mb4 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>
|
||||
<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>
|
||||
|
||||
<p class="mt0 mb4 lh-copy gray7"><strong>Cross-origin caveat: </strong> This requires that you are serving the sprite from the same domain and port as the page.</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>
|
||||
|
||||
<p class="mv0 lh-copy gray7"><strong>Serving locally: </strong> 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>
|
||||
<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">
|
||||
@@ -273,20 +501,20 @@
|
||||
</p>
|
||||
|
||||
<ol class="mt0 mb4 pl3 list-position-outside">
|
||||
<li class="lh-copy mb3">
|
||||
<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 mb3">
|
||||
<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 mb3">
|
||||
<li class="lh-copy pl1 mb3">
|
||||
Activate each added font you want to use in your applications.
|
||||
</li>
|
||||
<li class="lh-copy mb3">
|
||||
<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>
|
||||
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 litte version of the icon next to each icon's unicode value).
|
||||
<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>
|
||||
|
||||
@@ -295,11 +523,63 @@
|
||||
|
||||
<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="#" class="link underline color-inherit hover-blue4 fw6">feedback about this release specfically 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">our contributing doc</a>.
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user