Font Awesome 5

You can find almost any icons you can think of. Head over to https://fontawesome.com/icons?d=gallery and rock the web!




Basic look:





With colors:

Warning, you must ensure to ...

Item 1
Item 2
Item 3
Item 4




Equal spacing (fa-fw):

Home
Info
Twitter
Applications
Settings




Sizes:











Rotation:




Animation:




Layering icons together:




HTML source

You can find almost any icons you can think of. Head over to https://fontawesome.com/icons?d=gallery and rock the web!

<br><br>
**Basic look**:
<i class="fas fa-globe-americas"></i>
<i class="fas fa-exclamation-triangle"></i>
<i class="fab fa-twitter"></i>

<br><br>
**With colors**:

<i class="fa-inverse fas fa-exclamation-triangle" style="color:#ff1654"></i> Warning, you must ensure to ...

<!--
Find nice color here:
https://coolors.co/247ba0-70c1b3-b2dbbf-f3ffbd-ff1654
https://coolors.co/app/05668d-028090-00a896-02c39a-f0f3bd
-->

<i class="fas fa-check" style="color:#02c39a"></i> Item 1
<i class="fas fa-check" style="color:#02c39a"></i> Item 2
<i class="fas fa-check" style="color:#02c39a"></i> Item 3
<i class="fas fa-check" style="color:#02c39a"></i> Item 4

<br><br>
**Equal spacing (fa-fw)**:

<div><em class="fas fa-home fa-fw"></em> Home</div>
<div><em class="fas fa-info fa-fw"></em> Info</div>
<div><em class="fab fa-twitter-square fa-fw"></em> Twitter</div>
<div><em class="fas fa-pencil-alt fa-fw"></em> Applications</div>
<div><em class="fas fa-cog fa-fw"></em> Settings</div>

<br><br>
**Sizes**:

<em class="fas fa-adjust fa-xs"></em>
<em class="fab fa-twitter-square fa-sm"></em>
<em class="fas fa-adjust fa-lg"></em>
<em class="fab fa-twitter-square fa-2x"></em>
<em class="fas fa-adjust fa-3x"></em>
<em class="fab fa-twitter-square fa-5x"></em>
<em class="fas fa-adjust fa-7x"></em>
<em class="fab fa-twitter-square fa-10x"></em>

<br><br>
**Rotation**:
    
<div class="fa-4x">
  <em class="fab fa-font-awesome"></em>
  <em class="fab fa-font-awesome fa-rotate-90"></em>
  <em class="fab fa-font-awesome fa-rotate-180"></em>
  <em class="fab fa-font-awesome fa-rotate-270"></em>
  <em class="fab fa-font-awesome fa-flip-horizontal"></em>
  <em class="fab fa-font-awesome fa-flip-vertical"></em>
</div>

<br><br>
**Animation**:

<div class="fa-3x">
  <em class="fas fa-spinner fa-spin"></em>
  <em class="fas fa-circle-notch fa-spin"></em>
  <em class="fas fa-sync fa-spin"></em>
  <em class="fas fa-cog fa-spin"></em>
  <em class="fas fa-spinner fa-pulse"></em>
  <em class="fas fa-stroopwafel fa-spin"></em>
</div>

<br><br>
**Layering icons together**:

<span class="fa-stack fa-2x">
  <em class="fas fa-square fa-stack-2x"></em>
  <em class="fab fa-twitter fa-stack-1x fa-inverse"></em>
</span>
<span class="fa-stack fa-2x">
  <em class="fas fa-circle fa-stack-2x"></em>
  <em class="fas fa-flag fa-stack-1x fa-inverse"></em>
</span>
<span class="fa-stack fa-2x">
  <em class="fas fa-square fa-stack-2x"></em>
  <em class="fas fa-terminal fa-stack-1x fa-inverse"></em>
</span>
<span class="fa-stack fa-4x">
  <em class="fas fa-square fa-stack-2x"></em>
  <em class="fas fa-terminal fa-stack-1x fa-inverse"></em>
</span>
<span class="fa-stack fa-2x">
  <em class="fas fa-camera fa-stack-1x"></em>
  <em class="fas fa-ban fa-stack-2x" style="color:Tomato"></em>
</span>

<br><br>


   Jump in the conversation 😉.
To comment below, login with your GitHub account.