Login Logout
Jump to: navigation, search

Font Awesome

This is the stand alone version of Font Awesome 5, if you're a user of Bootstrapskin 2, there's no need to download this extension as it is pre-installed.

Download26

Install and use

  • Download and unpack in the Mediawiki extension folder.
  • Add the following to LocalSettings.php
require_once "$IP/extensions/FontAwesome/FontAwesome.php";

Check out the brand new cheat sheet @ view icons which includes 907 icons.

How to use

FA5 differs slightly, no longer using fa fa-icon-name, but shifting to <i class="fas fa-camera-retro"></i>, so lets get started on how to use them.

Ordinary use of the icon is as above, however there a lot more that be done, for example sizing;

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

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

  • List icons can
  • be used to
  • replace bullets
  • in 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>

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

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.

<i class="fas fa-quote-left fa-2x fa-pull-left fa-border"></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.

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works especially well with fa-spinner & everything in the spinner icons category.

 
 
 
 
 
<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>
</div>

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-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-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-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

Rate us!

Did you find this article useful? Why not rate it?