thanthos/Font-Awesome-Pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 5.0.0-beta2

Browse Source
This commit is contained in:
robmadole
2017-08-11 16:03:19 -05:00
committed by Rob Madole
parent 2c521ab02f
commit 5efe31d8eb
213 changed files with 32876 additions and 15904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
docs/index.html
View File

@@ -39,31 +39,35 @@
</h1>
<nav>
<a href="/docs/index.html" class="db link blue4 tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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="/docs/inventory.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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="/docs/recent.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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="/docs/svg-framework.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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="/docs/svg-sprite.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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="/docs/webfont.html" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<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/packages/fontawesome" target="_blank" class="db link white o-80 glow tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<span class="dib fw8 v-mid db-ns mb2-ns mr2 mr0-ns o-40"><i class="fa5 fa5-code fa5-lg"></i></span>
<span class="fw6">JS/npm Package</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>
@@ -87,13 +91,74 @@
<div class="ph4 ph6-ns pv6">
<h1 class="mt0 mb4 b f6">
Getting Started with Font Awesome 5
</h1>
<h1 class="mt0 mb4 b f6">Getting Started with Font Awesome 5</h1>
<p class="mt0 mb3 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>
<p class="mt0 mb3 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>
<div class="mb4">
<h2 class="mt0 mb3 f4 fw6 gray7 vf">How to Use</h2>
<p class="lh-copy mv0">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.</p>
</div>
<table class="collapse tl mv0 lh-copy dt-fixed overflow-scroll" summary="details on all of the options for using Font Awesome 5 online">
<thead>
<tr class="bb bw2 b--gray2">
<th scope="col" class="pv2 pr3 br bw1 b--gray1 f4 fw6 v-bottom"><a class="link blue4 underline-hover hover-blue" href="#svg-framework">SVG Framework</a></th>
<th scope="col" class="pv2 ph3 br bw1 b--gray1 f4 fw6 v-bottom"><a class="link blue4 underline-hover hover-blue" href="webfont">Web Fonts</a></th>
<th scope="col" class="pv2 pl3 f4 fw6 v-bottom"><a class="link blue4 underline-hover hover-blue" href="#svg-sprites">SVG Sprites</a></th>
</tr>
</thead>
<tbody>
<tr class="v-top">
<td class="pv3 pr3 br bw1 b--gray1">
<p class="lh-copy mv0">Uses the ridiculously flexible and powerful scalable vector graphics format (SVG)</p>
</td>
<td class="pv3 ph3 br bw1 b--gray1">
<p class="lh-copy mv0">The same battle-tested and reliable way Font Awesome has worked <a class="link blue4 underline-hover hover-blue" href="https://github.com/FortAwesome/Font-Awesome/commit/16a35a28d380b564c6080512d2e94fc18624c09d">from the beginning</a></p>
</td>
<td class="pv3 pl3">
<p class="lh-copy mv0">Clean, simple, and the perfect foundation for advanced users willing to do some work</p>
</td>
</tr>
<tr class="v-top bb bt bw1 b--gray1">
<td class="pv3 tc ttu tracked1 b bg-gray1" colspan="3">
You might be a good candidate to use a method if&hellip;
</td>
</tr>
<tr class="v-top">
<td class="pv3 pr3 br bw1 b--gray1">
<ul class="list ma0 pa0 lh-copy fa5-ul">
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You agree with us: SVG is probably the best way to use icons</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>Using JavaScript sounds simpler than web fonts</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You want the new features</li>
<li class=""><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You need the most <a class="link blue4 underline-hover hover-blue" href="#shim">backwards compatibility</a></li>
</ul>
</td>
<td class="pv3 ph3 br bw1 b--gray1">
<ul class="list ma0 pa0 lh-copy fa5-ul">
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You want to stick with same technique FA 4 uses (and need IE9 support)</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You aren't quite ready for SVG icons and don't mind web fonts</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You need the most rock-solid low-risk way to use icons</li>
<li class=""><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>The prospect of using JavaScript doesn't sound appealing</li>
</ul>
</td>
<td class="pv3 pl3">
<ul class="list ma0 pa0 lh-copy fa5-ul">
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You are an advanced user</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You are familiar with this technique and prefer it</li>
<li class="mb3"><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>No dependencies on JavaScript or Web Fonts makes you giddy</li>
<li class=""><i class="fa5-li fa5 fa5-dot-circle-r gray4"></i>You are willing to write your own CSS and <strike>dominate</strike> lovingly control everything</li>
</ul>
</td>
</tr>
</tbody>
</table>
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
<section id="svg-framework" class="bt bw2 b--blue0 bg-white br2 br--bottom pa4 relative">
<h2 class="mt0 mb2 b f5">
@@ -123,7 +188,7 @@
Include them in the <code class="blue4">&lt;head&gt;</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">&lt;body&gt;</code> of your document.
Reference Font Awesome icons (using <a href="inventory.html" class="link blue4 underline-hover hover-blue">the inventory</a> for easy copying/pasting) in the <code class="blue4">&lt;body&gt;</code> of your document.
</li>
</ol>
@@ -154,9 +219,11 @@
<span class="blue2">&lt;/body&gt;</span></code>
</div>
<p class="mt0 mb3 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>
<div class="mb4">
<p class="mt0 mb3 lh-copy pa4 br2 bg-blue0">Need another example? Check out the <a href="svg-framework.html" class="link blue4 underline-hover hover-blue fw6">SVG Framework demo</a>.</p>
<p class="mt0 mb3 lh-copy pa4 br2 bg-blue0">Need Font Awesome 4 icon names that are missing in 5? Learn how to <a href="#shim" class="link blue4 underline-hover fw6">shim using the JavaScript version.</a></p>
<p class="mv0 lh-copy pa4 br2 bg-blue0">Need Font Awesome 4 icon names that are missing in 5? Learn how to <a href="#shim" class="link blue4 underline-hover hover-blue fw6">shim using the JavaScript version.</a></p>
</div>
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
<div class="overflow-x-scroll">
@@ -294,7 +361,9 @@
<span class="blue2">&lt;/body&gt;</span></code>
</div>
<p class="mt0 mb3 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>
<div class="mb4">
<p class="mv0 lh-copy pa4 br2 bg-green0">Need another example? Check out the <a href="webfont.html" class="link blue4 underline-hover hover-blue fw6">Web Font demo</a>.</p>
</div>
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
<div class="overflow-x-scroll">
@@ -406,7 +475,9 @@
<span class="blue2">&lt;/body&gt;</span></code>
</div>
<p class="mt0 mb3 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>
<div class="mb4">
<p class="mv0 lh-copy pa4 br2 bg-red0">Need another example? Check out the <a href="svg-sprite.html" class="link blue4 underline-hover hover-blue fw6">SVG Sprites demo</a>.</p>
</div>
<h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
<div class="overflow-x-scroll">
@@ -538,7 +609,7 @@
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">
<ol class="mv0 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>
@@ -550,7 +621,7 @@
</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">&lt;script</span> <span class="blue4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="blue4">"</span><span class="blue2">&lt;/script&gt;</span></code>
<code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2">&lt;script</span> <span class="blue4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="blue4">"</span><span class="blue2">&gt;&lt;/script&gt;</span></code>
</div>
</li>
<li class="lh-copy pl1 mb3">
@@ -566,16 +637,16 @@
Update or remove any custom styling you've added around Font Awesome icons (if applicable).
</li>
<li class="lh-copy pl1">
Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with pre-alphas).
Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with betas).
</li>
</ol>
</div>
<h3 class="mt0 mb3 f3 b">Heads up about referencing icons</h3>
<h3 id="shim" class="mt0 mb3 f3 b">Heads up about referencing icons</h3>
<p class="mt0 mb3 lh-copy">Not all icons and aliases from V4 are the same in V5 yet. So what's changed?</p>
<p class="mt0 mb3 lh-copy">Not all icons and aliases from V4 are the same in V5. So what's changed?</p>
<div role="alert" class="dt w-100 mb4 relative">
<div role="alert" class="dt w-100 mb6 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>
@@ -594,7 +665,7 @@
<p class="mt0 mb3 lh-copy">We know that these changes can really slow you down in adopting V5. To help out we've created a <a class="link underline color-inherit hover-blue4" href="https://en.wikipedia.org/wiki/Shim_(computing)">shim</a> 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.</p>
<h3 id="shim" class="mt0 mb3 f3 fw6 gray5">Example Font Awesome version 4 shim (JavaScript method only):</h3>
<h3 class="mt0 mb3 f3 fw6 gray5">Example Font Awesome version 4 shim (JavaScript method only):</h3>
<div class="bg-gray7 br2 bl bw3 b--gray6 pa4 overflow-scroll shadow-inset-6">
<code class="pre gray2 lh-copy"><span class="blue2">&lt;head&gt;</span>
<span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/regular.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
@@ -623,7 +694,7 @@
<h2 class="mt0 mb2 b f5">Questions? Comments? Feedback?</h2>
<p class="mv0 f3 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/562" 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>.
We're still in beta land with Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/576" class="link blue4 underline-hover hover-blue" 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 blue4 underline-hover hover-blue" target="_blank">our contributing doc</a>.
</p>
</section>