Font Awesome

Font awesome

Set up your site

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

Add icons

Use inline elements <i> <em> <span>

• Name prefixed width fa-
• Style corresponding prefix fas fab

<i class="fas fa-stroopwafel"></i> <!--style prefix == fas icon name == stroopwafel -->
<i class="fas fa-stroopwafel"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-stroopwafel"></span> <!-- using a <span> element to reference the icon -->
<em class="fas fa-stroopwafel"></em> <!-- using a <em> element to reference the icon -->

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

Style icons

font awesome icons + your project`s styling

Font Awesome icons automatically inherit CSS size and color

Examples

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-stroopwafel"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-stroopwafel"></i>
  </span>
</span>

Sizing icons

Relative Sizing

<i class="fas fa-igloo fa-xs"></i>
<i class="fas fa-igloo fa-sm"></i>
<i class="fas fa-igloo fa-lg"></i>
<i class="fas fa-igloo fa-2x"></i>
<i class="fas fa-igloo fa-3x"></i>
<i class="fas fa-igloo fa-5x"></i>
<i class="fas fa-igloo fa-7x"></i>
<i class="fas fa-igloo fa-10x"></i>

Notes:You can directly style an icon`s size by setting a font-size in your projects CSSthat targets an icon or directly in the style attribute of theHTML` element referencing an icon.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-xs"></i>
  <i class="fas fa-igloo fa-sm"></i>
  <i class="fas fa-igloo fa-lg"></i>
  <i class="fas fa-igloo fa-2x"></i>
  <i class="fas fa-igloo fa-3x"></i>
  <i class="fas fa-igloo fa-5x"></i>
  <i class="fas fa-igloo fa-7x"></i>
  <i class="fas fa-igloo fa-10x"></i>
</div>

Sizing scale details

Class	Size
fa-xs	0.75em
fa-sm	0.875em
fa-lg	1.333m
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

Fixed Width Icons

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed widths.

Fixed widths icons

<div style="font-size: 2rem;">
  <div><i class="fas fa-candy-cane fa-fw" style="background:LightCoral"></i> Candy Cane</div>
  <div><i class="fas fa-holly-berry fa-fw" style="background:LightGreen"></i> Decorations</div>
  <div><i class="fas fa-sleigh fa-fw" style="background:LightCoral"></i> Sleigh</div>
  <div><i class="fas fa-gifts fa-fw" style="background:LightGreen"></i> Gifts</div>
  <div><i class="fas fa-cookie-bite fa-fw" style="background:LightCoral"></i> Santa Leftovers</div>
</div>

Icons in a list

Use fa-ul fa-li to replace default bullets in unordered lists.

<ul class="fa-ul">
  <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Rotating icons

<div class="fa-4x">
  <i class="fas fa-snowman"></i>
  <i class="fas fa-snowman fa-rotate-90"></i>
  <i class="fas fa-snowman fa-rotate-180"></i>
  <i class="fas fa-snowman fa-rotate-270"></i>
  <i class="fas fa-snowman fa-flip-horizontal"></i>
  <i class="fas fa-snowman fa-flip-vertical"></i>
</div>

Animating icons

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-star-christmas fa-spin"></i>
</div>

Pulled icons

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Stacked icons

• Add fa-stack class to the parent HTML element of the 2 icons you want to stack.
• Add fa-stack-1x class to the regularly sized icon .
• Add fa-stack-2x class to the larger icon

fa-inverse can be added to the icon with fs-stack-1x to help with a knock-out looking effect.

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

CSS presedo-elements

    <ul style="margin: 0;">
        <li><span class="icon login"></span> Login</li>
        <li><span class="icon tps"></span> TPS Reports</li>
        <li><span class="icon twitter"></span> Twitter</li>
    </ul>

.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }

Reference

Font Awesome

SourceCode

Font-awesome