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

Release 5.0.0-rc5

Browse Source
This commit is contained in:
robmadole
2017-11-28 12:57:22 -06:00
committed by Rob Madole
parent 763666f11d
commit 267ce7f795
4577 changed files with 95745 additions and 19257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/index.html
View File

@@ -7,18 +7,18 @@
<title>Getting Started - Font Awesome 5</title>
<script defer src="../js/packs/light.min.js"></script>
<script defer src="../js/packs/regular.min.js"></script>
<script defer src="../js/packs/solid.min.js"></script>
<script defer src="../js/packs/brands.min.js"></script>
<script defer src="../js/fontawesome.min.js"></script>
<script defer src="../on-server/js/fa-light.min.js"></script>
<script defer src="../on-server/js/fa-regular.min.js"></script>
<script defer src="../on-server/js/fa-solid.min.js"></script>
<script defer src="../on-server/js/fa-brands.min.js"></script>
<script defer src="../on-server/js/fontawesome.min.js"></script>
<noscript>
<link rel="stylesheet" href="../css/fontawesome-pro-core.css">
<link rel="stylesheet" href="../css/fontawesome-pro-solid.css">
<link rel="stylesheet" href="../css/fontawesome-pro-regular.css">
<link rel="stylesheet" href="../css/fontawesome-pro-light.css">
<link rel="stylesheet" href="../css/fontawesome-pro-brands.css">
<link rel="stylesheet" href="../on-server/css/fontawesome.min.css">
<link rel="stylesheet" href="../on-server/css/fa-solid.min.css">
<link rel="stylesheet" href="../on-server/css/fa-regular.min.css">
<link rel="stylesheet" href="../on-server/css/fa-light.min.css">
<link rel="stylesheet" href="../on-server/css/fa-brands.min.css">
</noscript>
<!-- font awesome team specific styling. ignore/replace with your own -->
@@ -73,7 +73,7 @@
<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="../docs/svg-with-js.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>
@@ -143,7 +143,7 @@
<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>
<a class="link blue4 underline-hover hover-blue" href="#svg-with-js">SVG Framework</a>
</h3>
<p class="lh-copy mv0 fw6">Uses the ridiculously flexible and powerful scalable vector graphics format (SVG).</p>
@@ -180,7 +180,7 @@
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
<section id="svg-framework" class="bt bw2 b--green0 bg-white br2 br--bottom pa4 relative">
<section id="svg-with-js" class="bt bw2 b--green0 bg-white br2 br--bottom pa4 relative">
<h2 class="mt0 mb2 b f5">
Use Icons via SVG Framework
</h2>
@@ -199,7 +199,7 @@
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="orange4">/js/packs/solid.js</code>) in the <code class="orange4">/js/packs</code> directory.
Grab one or more of the styles (ex: <code class="orange4">/js/fa-solid.js</code>) in the <code class="orange4">/js</code> directory.
</li>
<li class="lh-copy pl1 mb3">
Place these files in your project static files.
@@ -216,7 +216,7 @@
<h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
&lt;head&gt;
&lt;script defer src="/js/packs/solid.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-solid.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fontawesome.js"&gt;&lt;/script&gt;
&lt;/head&gt;
@@ -228,8 +228,8 @@
<h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
&lt;head&gt;
&lt;script defer src="/js/packs/light.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/packs/regular.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-light.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-regular.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fontawesome.js"&gt;&lt;/script&gt;
&lt;/head&gt;
@@ -240,7 +240,7 @@
</div>
<div class="mb4">
<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="mt0 mb3 lh-copy pa4 br2 bg-green0">Need another example? Check out the <a href="svg-with-js.html" class="link blue4 underline-hover hover-blue fw6">SVG Framework demo</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>
@@ -336,13 +336,13 @@
<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="orange4">/css/fontawesome-pro-core.css</code>
Grab the base Font Awesome icon font supporting styling at <code class="orange4">/css/fontawesome.css</code>
</li>
<li class="lh-copy pl1 mb3">
Grab one or more of the style CSS files (ex. <code class="orange4">/css/fontawesome-pro-light.css</code>) in the <code class="orange4">/css</code> directory.
Grab one or more of the style CSS files (ex. <code class="orange4">/css/fa-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="orange4">/webfonts/fontawesome-pro-light-300.woff2</code>) in the <code class="orange4">/webfonts</code> directory.
Grab the corresponding web font files (ex. <code class="orange4">/webfonts/fa-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.
@@ -358,8 +358,8 @@
<h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
&lt;head&gt;
&lt;link rel="stylesheet" href="/css/fontawesome-pro-solid.css"&gt;
&lt;link rel="stylesheet" href="/css/fontawesome-pro-core.css"&gt;
&lt;link rel="stylesheet" href="/css/fa-solid.css"&gt;
&lt;link rel="stylesheet" href="/css/fontawesome.css"&gt;
&lt;/head&gt;
&lt;body&gt;
@@ -370,9 +370,9 @@
<h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
&lt;head&gt;
&lt;link rel="stylesheet" href="/css/fontawesome-pro-light.css"&gt;
&lt;link rel="stylesheet" href="/css/fontawesome-pro-regular.css"&gt;
&lt;link rel="stylesheet" href="/css/fontawesome-pro-core.css"&gt;
&lt;link rel="stylesheet" href="/css/fa-light.css"&gt;
&lt;link rel="stylesheet" href="/css/fa-regular.css"&gt;
&lt;link rel="stylesheet" href="/css/fontawesome.css"&gt;
&lt;/head&gt;
&lt;body&gt;
@@ -476,7 +476,7 @@
<ol class="mt0 mb4 pl3 list-position-outside">
<li class="lh-copy pl1 mb3">
Grab one of the sprite files (<code class="orange4">/sprites/solid.svg</code>) in the <code class="orange4">/sprites</code> directory.
Grab one of the sprite files (<code class="orange4">/sprites/fa-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.
@@ -490,7 +490,7 @@
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6 lh-title">
&lt;body&gt;
&lt;svg&gt;
&lt;use xlink:href="solid.svg#user"&gt;&lt;/use&gt;
&lt;use xlink:href="fa-solid.svg#user"&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;/body&gt;
</div>
@@ -602,7 +602,7 @@
<h3 class="mt0 mb3 f4 fw6 gray7">Set Up</h3>
<ol class="mv0 pl3 list-position-outside">
<li class="lh-copy pl1 mb3">
Grab one or more of the <strong class="b">.otf font files</strong> for the icon styles you want to use (ex. <code class="orange4">/webfonts/fontawesome-pro-light-300.otf</code>) in the <code class="orange4">/webfonts</code> directory.
Grab one or more of the <strong class="b">.otf font files</strong> for the icon styles you want to use (ex. <code class="orange4">/webfonts/fa-light-300.otf</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).
@@ -665,7 +665,7 @@
</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>.
Pick your method of using Font Awesome 5: <a href="#svg-with-js" 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.
@@ -708,10 +708,10 @@
<h3 class="mt0 mb3 f3 fw6 gray5">Example Font Awesome version 4 shim (JavaScript method only):</h3>
<div data-highlight class="bg-gray7 br2 bl bw3 b--gray6 pa4 overflow-scroll shadow-inset-6">
&lt;head&gt;
&lt;script defer src="/js/packs/regular.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/packs/brands.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/packs/solid.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/v4-shims.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-regular.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-brands.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-solid.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fa-v4-shims.js"&gt;&lt;/script&gt;
&lt;script defer src="/js/fontawesome.js"&gt;&lt;/script&gt;
&lt;/head&gt;
@@ -734,7 +734,7 @@
<h2 class="mt0 mb2 b f5">Questions? Comments? Feedback?</h2>
<p class="mv0 f3 lh-copy gray7">
We're working on a release candidate of Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/822" 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 working on a release candidate of Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/876" 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>

144
docs/inventory.html
View File

@@ -7,18 +7,18 @@
<title>Inventory - Font Awesome 5</title>
<script defer src="../js/packs/light.min.js"></script>
<script defer src="../js/packs/regular.min.js"></script>
<script defer src="../js/packs/solid.min.js"></script>
<script defer src="../js/packs/brands.min.js"></script>
<script defer src="../js/fontawesome.min.js"></script>
<script defer src="../on-server/js/fa-light.min.js"></script>
<script defer src="../on-server/js/fa-regular.min.js"></script>
<script defer src="../on-server/js/fa-solid.min.js"></script>
<script defer src="../on-server/js/fa-brands.min.js"></script>
<script defer src="../on-server/js/fontawesome.min.js"></script>
<noscript>
<link rel="stylesheet" href="../css/fontawesome-pro-core.css">
<link rel="stylesheet" href="../css/fontawesome-pro-solid.css">
<link rel="stylesheet" href="../css/fontawesome-pro-regular.css">
<link rel="stylesheet" href="../css/fontawesome-pro-light.css">
<link rel="stylesheet" href="../css/fontawesome-pro-brands.css">
<link rel="stylesheet" href="../on-server/css/fontawesome.min.css">
<link rel="stylesheet" href="../on-server/css/fa-solid.min.css">
<link rel="stylesheet" href="../on-server/css/fa-regular.min.css">
<link rel="stylesheet" href="../on-server/css/fa-light.min.css">
<link rel="stylesheet" href="../on-server/css/fa-brands.min.css">
</noscript>
<!-- font awesome team specific styling. ignore/replace with your own -->
@@ -73,7 +73,7 @@
<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="../docs/svg-with-js.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>
@@ -116,12 +116,12 @@
<div class="ph4 ph6-ns pv6">
<h1 class="mt0 mb6 b f6">
<span class="db gray5 mb2 f3 fw6">As of 10/27/2017</span><span class="sr-only">:</span>
<span class="db gray5 mb2 f3 fw6">As of 11/28/2017</span><span class="sr-only">:</span>
All Font Awesome 5 Icons
</h1>
<section id="fas" class="mb7">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
@@ -1588,6 +1588,14 @@
<span class="ml2 f2 gray5 fw6">compress</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -1884,6 +1892,14 @@
<span class="ml2 f2 gray5 fw6">expand</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -5064,7 +5080,7 @@
</section>
<section id="far" class="mb7">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
@@ -6531,6 +6547,14 @@
<span class="ml2 f2 gray5 fw6">compress</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -6827,6 +6851,14 @@
<span class="ml2 f2 gray5 fw6">expand</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -10007,7 +10039,7 @@
</section>
<section id="fal" class="mb7">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
@@ -11474,6 +11506,14 @@
<span class="ml2 f2 gray5 fw6">compress</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -11770,6 +11810,14 @@
<span class="ml2 f2 gray5 fw6">expand</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -14950,7 +14998,7 @@
</section>
<section id="fab">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr">311 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr">319 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
@@ -15049,6 +15097,14 @@
<span class="ml2 f2 gray5 fw6">angrycreative</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/angular.svg" target="_blank" class="color-inherit link">
<i class="fab fa-angular min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">angular</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/app-store.svg" target="_blank" class="color-inherit link">
@@ -15121,6 +15177,14 @@
<span class="ml2 f2 gray5 fw6">avianex</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aviato.svg" target="_blank" class="color-inherit link">
<i class="fab fa-aviato min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">aviato</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aws.svg" target="_blank" class="color-inherit link">
@@ -15609,6 +15673,14 @@
<span class="ml2 f2 gray5 fw6">edge</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/ember.svg" target="_blank" class="color-inherit link">
<i class="fab fa-ember min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">ember</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/empire.svg" target="_blank" class="color-inherit link">
@@ -15737,6 +15809,14 @@
<span class="ml2 f2 gray5 fw6">font-awesome-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/font-awesome-flag.svg" target="_blank" class="color-inherit link">
<i class="fab fa-font-awesome-flag min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">font-awesome-flag</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/fonticons.svg" target="_blank" class="color-inherit link">
@@ -15881,6 +15961,14 @@
<span class="ml2 f2 gray5 fw6">gitlab</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/gitter.svg" target="_blank" class="color-inherit link">
<i class="fab fa-gitter min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">gitter</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/glide.svg" target="_blank" class="color-inherit link">
@@ -16041,6 +16129,14 @@
<span class="ml2 f2 gray5 fw6">hire-a-helper</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hooli.svg" target="_blank" class="color-inherit link">
<i class="fab fa-hooli min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">hooli</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hotjar.svg" target="_blank" class="color-inherit link">
@@ -16993,6 +17089,22 @@
<span class="ml2 f2 gray5 fw6">sticker-mule</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/strava.svg" target="_blank" class="color-inherit link">
<i class="fab fa-strava min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">strava</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/stripe.svg" target="_blank" class="color-inherit link">
<i class="fab fa-stripe min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">stripe</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/studiovinari.svg" target="_blank" class="color-inherit link">

198
docs/recent.html
View File

@@ -7,18 +7,18 @@
<title>Recent Icons Added/Edited - Font Awesome 5</title>
<script defer src="../js/packs/light.min.js"></script>
<script defer src="../js/packs/regular.min.js"></script>
<script defer src="../js/packs/solid.min.js"></script>
<script defer src="../js/packs/brands.min.js"></script>
<script defer src="../js/fontawesome.min.js"></script>
<script defer src="../on-server/js/fa-light.min.js"></script>
<script defer src="../on-server/js/fa-regular.min.js"></script>
<script defer src="../on-server/js/fa-solid.min.js"></script>
<script defer src="../on-server/js/fa-brands.min.js"></script>
<script defer src="../on-server/js/fontawesome.min.js"></script>
<noscript>
<link rel="stylesheet" href="../css/fontawesome-pro-core.css">
<link rel="stylesheet" href="../css/fontawesome-pro-solid.css">
<link rel="stylesheet" href="../css/fontawesome-pro-regular.css">
<link rel="stylesheet" href="../css/fontawesome-pro-light.css">
<link rel="stylesheet" href="../css/fontawesome-pro-brands.css">
<link rel="stylesheet" href="../on-server/css/fontawesome.min.css">
<link rel="stylesheet" href="../on-server/css/fa-solid.min.css">
<link rel="stylesheet" href="../on-server/css/fa-regular.min.css">
<link rel="stylesheet" href="../on-server/css/fa-light.min.css">
<link rel="stylesheet" href="../on-server/css/fa-brands.min.css">
</noscript>
<!-- font awesome team specific styling. ignore/replace with your own -->
@@ -51,7 +51,7 @@
<span class="dib v-mid db-ns mb2-ns mr2 mr0-ns "><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="../docs/svg-with-js.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>
@@ -98,6 +98,150 @@
<section id="recent" class="">
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-expand-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">expand-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-compress-alt min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">compress-alt</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/youtube.svg" target="_blank" class="color-inherit link">
<i class="fab fa-youtube min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">youtube</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/twitter.svg" target="_blank" class="color-inherit link">
<i class="fab fa-twitter min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">twitter</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/font-awesome-flag.svg" target="_blank" class="color-inherit link">
<i class="fab fa-font-awesome-flag min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">font-awesome-flag</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/discord.svg" target="_blank" class="color-inherit link">
<i class="fab fa-discord min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">discord</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/ember.svg" target="_blank" class="color-inherit link">
<i class="fab fa-ember min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">ember</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/angular.svg" target="_blank" class="color-inherit link">
<i class="fab fa-angular min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">angular</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/stripe.svg" target="_blank" class="color-inherit link">
<i class="fab fa-stripe min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">stripe</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/strava.svg" target="_blank" class="color-inherit link">
<i class="fab fa-strava min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">strava</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hooli.svg" target="_blank" class="color-inherit link">
<i class="fab fa-hooli min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">hooli</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/gitter.svg" target="_blank" class="color-inherit link">
<i class="fab fa-gitter min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">gitter</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/cc-stripe.svg" target="_blank" class="color-inherit link">
<i class="fab fa-cc-stripe min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">cc-stripe</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aviato.svg" target="_blank" class="color-inherit link">
<i class="fab fa-aviato min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">aviato</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/poo.svg" target="_blank" class="color-inherit link">
@@ -338,14 +482,6 @@
<span class="ml2 f2 gray5 fw6">css3</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/youtube.svg" target="_blank" class="color-inherit link">
<i class="fab fa-youtube min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">youtube</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/microsoft.svg" target="_blank" class="color-inherit link">
@@ -6722,14 +6858,6 @@
<span class="ml2 f2 gray5 fw6">twitter-square</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/twitter.svg" target="_blank" class="color-inherit link">
<i class="fab fa-twitter min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">twitter</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/twitch.svg" target="_blank" class="color-inherit link">
@@ -12922,14 +13050,6 @@
<span class="ml2 f2 gray5 fw6">discourse</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/discord.svg" target="_blank" class="color-inherit link">
<i class="fab fa-discord min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">discord</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/digital-ocean.svg" target="_blank" class="color-inherit link">
@@ -14210,14 +14330,6 @@
<span class="ml2 f2 gray5 fw6">certificate</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/cc-stripe.svg" target="_blank" class="color-inherit link">
<i class="fab fa-cc-stripe min-w1 w-auto"></i>
</a>
<span class="ml2 f2 gray5 fw6">cc-stripe</span>
</div>
</li>
<li class="ma0 pa3 w-third w-20-ns link hover-bg-white br2">
<div class="flex flex-row flex-no-wrap items-center" style="font-size: 16px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/cc-paypal.svg" target="_blank" class="color-inherit link">

4488
docs/svg-sprite.html
View File

File diff suppressed because it is too large Load Diff

186
docs/svg-framework.html → docs/svg-with-js.html
View File

@@ -13,18 +13,18 @@
measurePerformance: true
}
</script>
<script defer src="../js/packs/light.min.js"></script>
<script defer src="../js/packs/regular.min.js"></script>
<script defer src="../js/packs/solid.min.js"></script>
<script defer src="../js/packs/brands.min.js"></script>
<script defer src="../js/fontawesome.min.js"></script>
<script defer src="../on-server/js/fa-light.min.js"></script>
<script defer src="../on-server/js/fa-regular.min.js"></script>
<script defer src="../on-server/js/fa-solid.min.js"></script>
<script defer src="../on-server/js/fa-brands.min.js"></script>
<script defer src="../on-server/js/fontawesome.min.js"></script>
<noscript>
<link rel="stylesheet" href="../css/fontawesome-pro-core.css">
<link rel="stylesheet" href="../css/fontawesome-prosolid.css">
<link rel="stylesheet" href="../css/fontawesome-proregular.css">
<link rel="stylesheet" href="../css/fontawesome-prolight.css">
<link rel="stylesheet" href="../css/fontawesome-probrands.css">
<link rel="stylesheet" href="../on-server/css/fontawesome.min.css">
<link rel="stylesheet" href="../on-server/css/fa-solid.min.css">
<link rel="stylesheet" href="../on-server/css/fa-regular.min.css">
<link rel="stylesheet" href="../on-server/css/fa-light.min.css">
<link rel="stylesheet" href="../on-server/css/fa-brands.min.css">
</noscript>
<!-- font awesome team specific styling. ignore/replace with your own -->
@@ -79,7 +79,7 @@
<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 blue4 tc-ns f3 mb4 bb bw1 b--white-05 pb4">
<a href="../docs/svg-with-js.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-magic-r fa5-lg"></i></span>
<span class="fw6">SVG Framework</span>
</a>
@@ -140,16 +140,16 @@
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#support-styling">Support Styling</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-transform">Transform</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-positioning">Positioning</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-compositions">Compositions</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-masks">Masking</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-layers">Layers</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-overlays">Overlays</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue mr4-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="#framework-extras">Extras</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue ml2-l fr-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="index.html#svg-framework">How to Get Started</a>
<a class="db dib-l v-mid-l link blue4 underline-hover hover-blue ml2-l fr-l pv2 mb2 mb0-l bb bw b--gray1 bn-l pv0-l" href="index.html#svg-with-js">How to Get Started</a>
</nav>
<div id="renderings">
<section id="fas" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -1799,6 +1799,15 @@
<span class="mt1 f2 o-30">f066</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">f422</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -2132,6 +2141,15 @@
<span class="mt1 f2 o-30">f065</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fas fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">f424</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -5709,7 +5727,7 @@
</section>
<section id="far" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -7359,6 +7377,15 @@
<span class="mt1 f2 o-30">f066</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">f422</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -7692,6 +7719,15 @@
<span class="mt1 f2 o-30">f065</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="far fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">f424</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -11269,7 +11305,7 @@
</section>
<section id="fal" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -12919,6 +12955,15 @@
<span class="mt1 f2 o-30">f066</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">f422</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-wide.svg" target="_blank" class="color-inherit link">
@@ -13252,6 +13297,15 @@
<span class="mt1 f2 o-30">f065</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-alt.svg" target="_blank" class="color-inherit link">
<i class="fal fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">f424</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-arrows.svg" target="_blank" class="color-inherit link">
@@ -16829,7 +16883,7 @@
</section>
<section id="fab" class="">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr mt1 f3">311 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr mt1 f3">319 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -16940,6 +16994,15 @@
<span class="mt1 f2 o-30">f36e</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/angular.svg" target="_blank" class="color-inherit link">
<i class="fab fa-angular"></i>
</a>
<span class="mt1 f2 fw6 gray5">angular</span>
<span class="mt1 f2 o-30">f420</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/app-store.svg" target="_blank" class="color-inherit link">
@@ -17021,6 +17084,15 @@
<span class="mt1 f2 o-30">f374</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aviato.svg" target="_blank" class="color-inherit link">
<i class="fab fa-aviato"></i>
</a>
<span class="mt1 f2 fw6 gray5">aviato</span>
<span class="mt1 f2 o-30">f421</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aws.svg" target="_blank" class="color-inherit link">
@@ -17570,6 +17642,15 @@
<span class="mt1 f2 o-30">f282</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/ember.svg" target="_blank" class="color-inherit link">
<i class="fab fa-ember"></i>
</a>
<span class="mt1 f2 fw6 gray5">ember</span>
<span class="mt1 f2 o-30">f423</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/empire.svg" target="_blank" class="color-inherit link">
@@ -17714,6 +17795,15 @@
<span class="mt1 f2 o-30">f35c</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/font-awesome-flag.svg" target="_blank" class="color-inherit link">
<i class="fab fa-font-awesome-flag"></i>
</a>
<span class="mt1 f2 fw6 gray5">font-awesome-flag</span>
<span class="mt1 f2 o-30">f425</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/fonticons.svg" target="_blank" class="color-inherit link">
@@ -17876,6 +17966,15 @@
<span class="mt1 f2 o-30">f296</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/gitter.svg" target="_blank" class="color-inherit link">
<i class="fab fa-gitter"></i>
</a>
<span class="mt1 f2 fw6 gray5">gitter</span>
<span class="mt1 f2 o-30">f426</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/glide.svg" target="_blank" class="color-inherit link">
@@ -18056,6 +18155,15 @@
<span class="mt1 f2 o-30">f3b0</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hooli.svg" target="_blank" class="color-inherit link">
<i class="fab fa-hooli"></i>
</a>
<span class="mt1 f2 fw6 gray5">hooli</span>
<span class="mt1 f2 o-30">f427</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hotjar.svg" target="_blank" class="color-inherit link">
@@ -19127,6 +19235,24 @@
<span class="mt1 f2 o-30">f3f7</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/strava.svg" target="_blank" class="color-inherit link">
<i class="fab fa-strava"></i>
</a>
<span class="mt1 f2 fw6 gray5">strava</span>
<span class="mt1 f2 o-30">f428</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/stripe.svg" target="_blank" class="color-inherit link">
<i class="fab fa-stripe"></i>
</a>
<span class="mt1 f2 fw6 gray5">stripe</span>
<span class="mt1 f2 o-30">f429</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/studiovinari.svg" target="_blank" class="color-inherit link">
@@ -19721,10 +19847,10 @@
<div class="w-100 w-30-xl pa4 bg-white br2 flex flex-column items-center justify-center">
<div data-example-container="style-list-example">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fal fa-square"></i>as bullets</li>
<li><i class="fa-li fal fa-square"></i>in lists</li>
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>List icons</li>
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>can be used</li>
<li><span class="fa-li"><i class="fal fa-square"></i></span>as bullets</li>
<li><span class="fa-li"><i class="fal fa-square"></i></span>in lists</li>
</ul>
</div>
</div>
@@ -19893,25 +20019,25 @@
<hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
<section id="framework-compositions">
<h2 class="mt0 mb3 b f5">Compositions</h2>
<section id="framework-masks">
<h2 class="mt0 mb3 b f5">Masking</h2>
<p class="mt0 mb4 lh-copy">
Compositions allow you to combine two icons into one shape. The background behind the icon will show through. This is perfect for placing icons on basic shapes.
Masking allow you to combine two icons into one shape. The background behind the icon will show through. This is perfect for placing icons on basic shapes.
</p>
<h3 class="mt0 mb2 f3 gray5 fw6">Example: Basic composition</h3>
<h3 class="mt0 mb2 f3 gray5 fw6">Example: Basic masking</h3>
<div class="flex flex-column flex-row-xl justify-between-xl mb4">
<div class="w-100 w-30-xl pa4 bg-white br2 flex flex-column items-center justify-center">
<div data-example-container="layers-composition-example" class="fa-4x">
<i class="fa fa-pencil" data-fa-transform="shrink-10" data-fa-compose="fa fa-comment"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-compose="fa fa-circle"></i>
<i class="green5 fa fa-headphones" data-fa-transform="shrink-6" data-fa-compose="fa fa-square"></i>
<div data-example-container="masking-example" class="fa-4x">
<i class="fa fa-pencil" data-fa-transform="shrink-10" data-fa-mask="fa fa-comment"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fa fa-circle"></i>
<i class="green5 fa fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fa fa-square"></i>
</div>
</div>
<div class="w-100 w-60-xl">
<div id="layers-composition-example" class="br2 bg-gray7 br2 bl bw3 b--gray6 lh-title">
<div id="masking-example" class="br2 bg-gray7 br2 bl bw3 b--gray6 lh-title">
</div>
</div>
</div>

196
docs/webfont.html
View File

@@ -7,11 +7,11 @@
<title>Web Font Demo - Font Awesome 5</title>
<link rel="stylesheet" href="../css/fontawesome-pro-core.css">
<link rel="stylesheet" href="../css/fontawesome-pro-solid.css">
<link rel="stylesheet" href="../css/fontawesome-pro-regular.css">
<link rel="stylesheet" href="../css/fontawesome-pro-light.css">
<link rel="stylesheet" href="../css/fontawesome-pro-brands.css">
<link rel="stylesheet" href="../on-server/css/fontawesome.min.css">
<link rel="stylesheet" href="../on-server/css/fa-solid.min.css">
<link rel="stylesheet" href="../on-server/css/fa-regular.min.css">
<link rel="stylesheet" href="../on-server/css/fa-light.min.css">
<link rel="stylesheet" href="../on-server/css/fa-brands.min.css">
<!-- font awesome team specific styling. ignore/replace with your own -->
<script src="https://use.fortawesome.com/349cfdf6.js"></script>
@@ -65,7 +65,7 @@
<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="../docs/svg-with-js.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>
@@ -129,7 +129,7 @@
<div id="renderings">
<section id="fas" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Solid <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -2328,6 +2328,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fas fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf422;</i></span>
<span class="dib v-mid">f422</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/compress-wide.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -2772,6 +2784,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fas fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf424;</i></span>
<span class="dib v-mid">f424</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/solid/expand-arrows.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -7540,7 +7564,7 @@
</section>
<section id="far" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Regular <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -9739,6 +9763,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="far fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf422;</i></span>
<span class="dib v-mid">f422</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/compress-wide.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -10183,6 +10219,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="far fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf424;</i></span>
<span class="dib v-mid">f424</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/regular/expand-arrows.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -14951,7 +14999,7 @@
</section>
<section id="fal" class="mb6">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr mt1 f3">617 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Light <span class="pl3 gray5 fr mt1 f3">619 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -17150,6 +17198,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fal fa-compress-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">compress-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf422;</i></span>
<span class="dib v-mid">f422</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/compress-wide.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -17594,6 +17654,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-alt.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fal fa-expand-alt"></i>
</a>
<span class="mt1 f2 fw6 gray5">expand-alt</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="far v-base">&#xf424;</i></span>
<span class="dib v-mid">f424</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/light/expand-arrows.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -22362,7 +22434,7 @@
</section>
<section id="fab">
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr mt1 f3">311 icons</span></h2>
<h2 class="mt0 mb3 pb3 bb bw1 b--gray1 f4 fw6 gray7 vf">Font Awesome 5 Brands &amp; Logos <span class="pl3 gray5 fr mt1 f3">319 icons</span></h2>
<ul class="nl3 nr3 list ma0 pa0 flex flex-row flex-wrap gray9">
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
@@ -22509,6 +22581,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/angular.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-angular"></i>
</a>
<span class="mt1 f2 fw6 gray5">angular</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf420;</i></span>
<span class="dib v-mid">f420</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/app-store.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -22617,6 +22701,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aviato.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-aviato"></i>
</a>
<span class="mt1 f2 fw6 gray5">aviato</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf421;</i></span>
<span class="dib v-mid">f421</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/aws.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -23349,6 +23445,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/ember.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-ember"></i>
</a>
<span class="mt1 f2 fw6 gray5">ember</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf423;</i></span>
<span class="dib v-mid">f423</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/empire.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -23541,6 +23649,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/font-awesome-flag.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-font-awesome-flag"></i>
</a>
<span class="mt1 f2 fw6 gray5">font-awesome-flag</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf425;</i></span>
<span class="dib v-mid">f425</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/fonticons.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -23757,6 +23877,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/gitter.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-gitter"></i>
</a>
<span class="mt1 f2 fw6 gray5">gitter</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf426;</i></span>
<span class="dib v-mid">f426</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/glide.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -23997,6 +24129,18 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hooli.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-hooli"></i>
</a>
<span class="mt1 f2 fw6 gray5">hooli</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf427;</i></span>
<span class="dib v-mid">f427</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/hotjar.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -25425,6 +25569,30 @@
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/strava.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-strava"></i>
</a>
<span class="mt1 f2 fw6 gray5">strava</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf428;</i></span>
<span class="dib v-mid">f428</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/stripe.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
<i class="fab fa-stripe"></i>
</a>
<span class="mt1 f2 fw6 gray5">stripe</span>
<span class="mt1 f2 o-30">
<span class="dib v-mid mr1"><i class="fab v-base">&#xf429;</i></span>
<span class="dib v-mid">f429</span>
</span>
</div>
</li>
<li class="ma0 pa3 w-50 w-third-m w-20-l link hover-bg-white br2">
<div class="flex flex-column items-center" style="font-size: 48px;">
<a href="https://github.com/FortAwesome/Font-Awesome-Pro/tree/master/svgs/brands/studiovinari.svg" target="_blank" class="color-inherit link" style="line-height: 0.65;">
@@ -26187,10 +26355,10 @@
<div class="w-100 w-30-xl pa4 bg-white br2 flex flex-column items-center justify-center">
<div data-example-container="style-list-example">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fal fa-square"></i>as bullets</li>
<li><i class="fa-li fal fa-square"></i>in lists</li>
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>List icons</li>
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>can be used</li>
<li><span class="fa-li"><i class="fal fa-square"></i></span>as bullets</li>
<li><span class="fa-li"><i class="fal fa-square"></i></span>in lists</li>
</ul>
</div>
</div>