Release 5.0.0-beta3
This commit is contained in:
robmadole
316
docs/index.html
316
docs/index.html
@@ -22,8 +22,30 @@
|
||||
</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>
|
||||
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css">
|
||||
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-prism.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-markup.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('[data-example-container]').forEach(function (example) {
|
||||
var exampleContainer = document.getElementById(example.getAttribute('data-example-container'))
|
||||
var indentLevel = example.innerHTML.indexOf('<')
|
||||
var exampleCode = example.innerHTML.split('\n').map(function (e) { return e.slice(indentLevel - 1) }).join('\n')
|
||||
|
||||
exampleContainer.innerHTML = '<div class="pa3 pre"><code class="mt0" style="color: #afafaf;">' + Prism.highlight(exampleCode, Prism.languages.markup).trim() + '</code></div>'
|
||||
})
|
||||
|
||||
document.querySelectorAll('[data-highlight]').forEach(function (element) {
|
||||
var indentLevel = element.innerHTML.indexOf('<')
|
||||
var exampleCode = _.unescape(element.innerHTML.split('\n').map(function (e) { return e.slice(indentLevel - 1) }).join('\n'))
|
||||
|
||||
element.innerHTML = '<div class="pre"><code class="mt0">' + Prism.highlight(exampleCode, Prism.languages.markup).trim() + '</code></div>'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="no-js min-vh-100 bg-gray1 gray7 ma0">
|
||||
@@ -43,30 +65,31 @@
|
||||
<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">
|
||||
<a href="../docs/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">
|
||||
<a href="../docs/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">
|
||||
<a href="../docs/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">
|
||||
<a href="../docs/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">
|
||||
<a href="../docs/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 href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/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-npm fa5-2x"></i>
|
||||
</span>
|
||||
<span class="fw6">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>
|
||||
@@ -74,8 +97,8 @@
|
||||
</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 href="#page-top" class="dn db-ns link o-20 glow white glow fixed bottom--1 right-1 bg-blue br3 br--top pa3 pb4 z-2">
|
||||
<span data-balloon="Top of the page" data-balloon-pos="left"><i class="fa5 fa5-arrow-to-top-r"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -100,72 +123,67 @@
|
||||
<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>
|
||||
<div class="flex flex-row flex-nowrap items-stretch justify-center nl4 nr4">
|
||||
<div class="bg-white w-third br2 ba b--black-10 pa4 pr5 relative right--1">
|
||||
<h3 class="mt0 mb2 fw6 f4">
|
||||
<a class="link blue4 underline-hover hover-blue" href="#webfont">Web Fonts</a>
|
||||
</h3>
|
||||
|
||||
<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>
|
||||
<p class="lh-copy mv0 fw6">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 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…
|
||||
</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>
|
||||
<hr class="bg-transparent bt bl br bw1 b--gray0 pa0 mv3">
|
||||
|
||||
<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>
|
||||
<ul class="list mv0 ml4 mr0 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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="bg-white shadow-2 w-third br2 ba b--blue4 pa4 z-2 scale3">
|
||||
<h3 class="mt0 mb2 fw6 f4">
|
||||
<a class="link blue4 underline-hover hover-blue" href="#svg-framework">SVG Framework</a>
|
||||
</h3>
|
||||
|
||||
<p class="lh-copy mv0 fw6">Uses the ridiculously flexible and powerful scalable vector graphics format (SVG).</p>
|
||||
|
||||
<hr class="bg-transparent bt bl br bw1 b--gray0 pa0 mv3">
|
||||
|
||||
<ul class="list mv0 ml4 mr0 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>
|
||||
</div>
|
||||
|
||||
<div class="bg-white w-third br2 ba b--black-10 pa4 pl5 relative left--1">
|
||||
<h3 class="mt0 mb2 fw6 f4">
|
||||
<a class="link blue4 underline-hover hover-blue" href="#svg-sprites">SVG Sprites</a>
|
||||
</h3>
|
||||
|
||||
<p class="lh-copy mv0 fw6">Clean, simple, and the perfect foundation for advanced users willing to do some work.</p>
|
||||
|
||||
<hr class="bg-transparent bt bl br bw1 b--gray0 pa0 mv3">
|
||||
|
||||
<ul class="list mv0 ml4 mr0 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<section id="svg-framework" class="bt bw2 b--green0 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="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 & Recommended!
|
||||
</span>
|
||||
@@ -176,53 +194,53 @@
|
||||
|
||||
<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>.
|
||||
Grab the base Font Awesome loader at <code class="orange4">/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.
|
||||
Grab one or more of the styles (ex: <code class="orange4">/js/packs/solid.js</code>) in the <code class="orange4">/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.
|
||||
Include them in the <code class="orange4"><head></code> of your document.
|
||||
</li>
|
||||
<li class="lh-copy pl1">
|
||||
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"><body></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="orange4"><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 lh-copy"><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>
|
||||
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
|
||||
<head>
|
||||
<script defer src="/js/packs/solid.js"></script>
|
||||
<script defer src="/js/fontawesome.js"></script>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<i class="fa fa-user"></i>
|
||||
</body>
|
||||
</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 lh-copy"><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>
|
||||
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
|
||||
<head>
|
||||
<script defer src="/js/packs/light.js"></script>
|
||||
<script defer src="/js/packs/regular.js"></script>
|
||||
<script defer src="/js/fontawesome.js"></script>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<i class="fal fa-user"></i>
|
||||
<i class="far fa-magic"></i>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<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-green0">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="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>
|
||||
<p class="mv0 lh-copy pa4 br2 bg-green0">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>
|
||||
@@ -303,7 +321,7 @@
|
||||
<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>
|
||||
<h2 class="mt0 mb2 b f5">Use Icons 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>
|
||||
@@ -311,54 +329,54 @@
|
||||
</span>
|
||||
|
||||
<p class="mt0 mb3 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:
|
||||
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="orange4">@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>
|
||||
Grab the base Font Awesome icon font supporting styling at <code class="orange4">/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.
|
||||
Grab one or more of the style CSS files (ex. <code class="orange4">/css/font-awesome-light.css</code>) in the <code class="orange4">/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.
|
||||
Grab the corresponding web font files (ex. <code class="orange4">/webfonts/fontawesome-light-300.woff2</code>) in the <code class="orange4">/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.
|
||||
Include a reference to the CSS files in the <code class="orange4"><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.
|
||||
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="orange4"><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 lh-copy"><span class="blue2"><head></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"><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"></head></span>
|
||||
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/font-awesome-solid.css">
|
||||
<link rel="stylesheet" href="/css/font-awesome-core.css">
|
||||
</head>
|
||||
|
||||
<span class="blue2"><body></span>
|
||||
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-user"<span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="blue2"></body></span></code>
|
||||
<body>
|
||||
<i class="fa fa-user"></i>
|
||||
</body>
|
||||
</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 lh-copy"><span class="blue2"><head></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"><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-core.css<span class="blue4">"</span><span class="blue2">></span>
|
||||
<span class="blue2"></head></span>
|
||||
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/font-awesome-light.css">
|
||||
<link rel="stylesheet" href="/css/font-awesome-regular.css">
|
||||
<link rel="stylesheet" href="/css/font-awesome-core.css">
|
||||
</head>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<i class="fal fa-user"></i>
|
||||
<i class="far fa-magic"></i>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div class="mb4">
|
||||
@@ -456,23 +474,23 @@
|
||||
|
||||
<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.
|
||||
Grab one of the sprite files (<code class="orange4">/sprites/solid.svg</code>) in the <code class="orange4">/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…
|
||||
In the <code class="orange4"><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 lh-copy"><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 data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
|
||||
<body>
|
||||
<svg>
|
||||
<use xlink:href="solid.svg#user"></use>
|
||||
</svg>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div class="mb4">
|
||||
@@ -561,7 +579,7 @@
|
||||
<p class="mt0 mb3 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">docs/svg-sprite.html</code> from the file system (if your address begins with <code class="blue4">file://</code>) it will fail to load.</p>
|
||||
<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="orange4">docs/svg-sprite.html</code> from the file system (if your address begins with <code class="orange4">file://</code>) it will fail to load.</p>
|
||||
</section>
|
||||
|
||||
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
||||
@@ -580,7 +598,7 @@
|
||||
|
||||
<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.
|
||||
Grab one or more of the web font files for the icon styles you want to use (ex. <code class="orange4">/webfonts/fontawesome-light-300.ttf</code>) in the <code class="orange4">/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).
|
||||
@@ -596,7 +614,7 @@
|
||||
</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>
|
||||
<p class="mv0 lh-copy gray7">Or grab one or more of the svg files from any style (ex. <code class="orange4">/svg/solid/user.svg</code>) in the <code class="orange4">/svg</code> directory.</p>
|
||||
</section>
|
||||
|
||||
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
|
||||
@@ -611,17 +629,17 @@
|
||||
|
||||
<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.)
|
||||
Remove the files associated with Font Awesome Version 4 from your project - including the <code class="orange4">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 mb3 lh-copy">Remove the reference to Font Awesome V4's JS or CSS from the <code class="blue4"><head></code> of your document.</p>
|
||||
<p class="mt0 mb3 lh-copy">Remove the reference to Font Awesome V4's JS or CSS from the <code class="orange4"><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>
|
||||
<code class="pre gray2 strike" style="text-decoration-color: rgba(255, 216, 168, 0.75);"><span class="orange2"><link</span> <span class="orange4">rel="</span>stylesheet<span class="orange4">"</span> <span class="orange4">href="</span>path/to/font-awesome-v4/css/font-awesome.min.css<span class="orange4">"</span><span class="orange2">></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>
|
||||
<code class="pre gray2 strike" style="text-decoration-color: rgba(255, 216, 168, 0.75);"><span class="orange2"><script</span> <span class="orange4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="orange4">"</span><span class="orange2">></script></span></code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="lh-copy pl1 mb3">
|
||||
@@ -666,25 +684,25 @@
|
||||
<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 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"><head></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/packs/brands.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/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/v4-shim.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>
|
||||
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 overflow-scroll shadow-inset-6">
|
||||
<head>
|
||||
<script defer src="/js/packs/regular.js"></script>
|
||||
<script defer src="/js/packs/brands.js"></script>
|
||||
<script defer src="/js/packs/solid.js"></script>
|
||||
<script defer src="/js/v4-shims.js"></script>
|
||||
<script defer src="/js/fontawesome.js"></script>
|
||||
</head>
|
||||
|
||||
<span class="blue2"><body></span>
|
||||
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-close<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="gray6"><!-- "close" is an alias to "times", V5 is <i class="fa fa-times"></i> --></span>
|
||||
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-picture<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="gray6"><!-- Renamed to "image", V5 is <i class="fa fa-image"></i> --></span>
|
||||
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-twitter<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="gray6"><!-- Needs the "fab" prefix, V5 <i class="fab fa-twitter"></i> --></span>
|
||||
<span class="blue2"><i</span> <span class="blue4">class="</span>fa fa-circle-o<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
||||
<span class="gray6"><!-- "far" prefix, lose the "-o", V5 <i class="far fa-circle"></i> --></span>
|
||||
<span class="blue2"></body></span></code>
|
||||
<body>
|
||||
<i class="fa fa-close"></i>
|
||||
<!-- "close" is an alias to "times", V5 is <i class="fa fa-times"></i> -->
|
||||
<i class="fa fa-picture"></i>
|
||||
<!-- Renamed to "image", V5 is <i class="fa fa-image"></i> -->
|
||||
<i class="fa fa-twitter"></i>
|
||||
<!-- Needs the "fab" prefix, V5 <i class="fab fa-twitter"></i> -->
|
||||
<i class="fa fa-circle-o"></i>
|
||||
<!-- "far" prefix, lose the "-o", V5 <i class="far fa-circle"></i> -->
|
||||
</body>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -694,7 +712,7 @@
|
||||
<h2 class="mt0 mb2 b f5">Questions? Comments? Feedback?</h2>
|
||||
|
||||
<p class="mv0 f3 lh-copy gray7">
|
||||
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>.
|
||||
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/594" 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user