USU FontAwesome Source

You'll need to add the appropriate script to your webpage "head."

In many cases this can be accomplished by adding


  <!-- Locally hosted USU copy of FontAwesome -->
  <script src="https://fontawesome.usu.edu/v6/js/all.js"></script>
          

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).


  <i class="fa fa-camera-retro"></i> fa-camera-retro
            
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.


  <i class="fa fa-camera-retro fa-lg"></i> fa-lg
  <i class="fa fa-camera-retro fa-2x"></i> fa-2x
  <i class="fa fa-camera-retro fa-3x"></i> fa-3x
  <i class="fa fa-camera-retro fa-4x"></i> fa-4x
  <i class="fa fa-camera-retro fa-5x"></i> fa-5x
            
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.


  <div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
  </div>
            
  • List icons
  • can be used
  • as bullets
  • in lists

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


  <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 fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
  </ul>
            

�tomorrow we will run faster, stretch out our arms farther� And then one fine morning� So we beat on, boats against the current, borne back ceaselessly into the past.

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


  <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
  ...tomorrow we will run faster, stretch out our arms farther...
  And then one fine morning&mdash; So we beat on, boats against the
  current, borne back ceaselessly into the past.
            

Loading example (with fa-spinner icon)
Loading (with fa-circle-notch icon)
Loading example (with fa-refresh icon)
Loading example (with fa-cog icon)
Loading example (with fa-spinner icon)

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.


  <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
  <br>
  <i class="fa fa-circle-notch fa-spin fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
  <br>
  <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
  <br>
  <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
  <br>
  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
    

Note: CSS3 animations aren't supported in IE8 - IE9.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.


  <i class="fa fa-shield-halved"></i> normal<br>
  <i class="fa fa-shield-halved fa-rotate-90"></i> fa-rotate-90<br>
  <i class="fa fa-shield-halved fa-rotate-180"></i> fa-rotate-180<br>
  <i class="fa fa-shield-halved fa-rotate-270"></i> fa-rotate-270<br>
  <i class="fa fa-shield-halved fa-flip-horizontal"></i> fa-flip-horizontal<br>
  <i class="fa fa-shield-halved fa-flip-vertical"></i> fa-flip-vertical
            
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.


  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  </span>fa-flag on fa-circle<br>
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
  </span>fa-terminal on fa-square<br>
  <span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>
  </span>fa-ban on fa-camera
    

Font Awesome works great with the full range of Bootstrap components.


  <a class="btn btn-danger" href="#">
    <i class="fa fa-trash-can fa-lg"></i> Delete</a>
  <a class="btn btn-outline-secondary" href="#">
    <i class="fa fa-cog"></i> Settings</a>
  
  <a class="btn btn-lg btn-success" href="#">
    <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 6</a>
  
  <div class="btn-group">
    <a class="btn btn-outline-secondary" href="#">
      <i class="fa fa-align-left" title="Align Left"></i>
    </a>
    <a class="btn btn-outline-secondary" href="#">
      <i class="fa fa-align-center" title="Align Center"></i>
    </a>
    <a class="btn btn-outline-secondary" href="#">
      <i class="fa fa-align-right" title="Align Right"></i>
    </a>
    <a class="btn btn-outline-secondary" href="#">
      <i class="fa fa-align-justify" title="Align Justify"></i>
    </a>
  </div>
  
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
    <input class="form-control" type="text" placeholder="Email address">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
    <input class="form-control" type="password" placeholder="Password">
  </div>
  
  <div class="btn-group" role="group">
    <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" href="#">
      <span class="sr-only" title="Toggle Dropdown"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
      <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
      <li class="divider"></li>
      <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
    </ul>
  </div>