313 lines
20 KiB
HTML
313 lines
20 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>
|
|
|
|
<body class="no->
|
|
</headjs 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="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 warning6 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 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:
|
|
</p>
|
|
|
|
<ol class="mt0 mb4 pl3 list-position-outside">
|
|
<li class="lh-copy mb3">
|
|
Grab the base Font Awesome loader at <code class="blue4">js/fontawesome.js</code>.
|
|
</li>
|
|
<li class="lh-copy 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">
|
|
Place these files in your project static files.
|
|
</li>
|
|
<li class="lh-copy mb3">
|
|
Include them in the <code class="blue4"><head></code> of your document.
|
|
</li>
|
|
<li class="lh-copy">
|
|
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 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"></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>
|
|
</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 let's 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">
|
|
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">
|
|
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">
|
|
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">
|
|
Place these files in your project static files.
|
|
</li>
|
|
<li class="lh-copy mb3">
|
|
Include a reference to the CSS files in the <code class="blue4"><head></code> of your document.
|
|
</li>
|
|
<li class="lh-copy">
|
|
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 far-magic<span class="blue4">"</span><span class="blue2">></span><span class="blue2"></i></span>
|
|
<span class="blue2"></body></span></code></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>
|
|
</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 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">
|
|
Place this file in your project static files.
|
|
</li>
|
|
<li class="lh-copy mb3">
|
|
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 class="blue2">></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 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>
|
|
|
|
<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>
|
|
</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 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">
|
|
Add them to your Font Management Software (for Macs that often Font Book or Font Explorer X).
|
|
</li>
|
|
<li class="lh-copy mb3">
|
|
Activate each added font you want to use in your applications.
|
|
</li>
|
|
<li class="lh-copy 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>
|
|
</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="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>.
|
|
</p>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|