You can find almost any icons you can think of. Head over to fontawesome.com 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)

Sizes

Rotation

Animation

Layering icons together

---

HTML source

You can find almost any icons you can think of. Head over to [fontawesome.com](https://fontawesome.com/) 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>

### 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

### 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>

### 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>

### 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>

### 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>

### 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>