.fas
to ensure SVG with JS is being used. <i class="fas fa-images text-primary fa-5x"></i>
Font Awesome 5 icons automatically inherit the color of the associated class or container around them.
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-primary"><i class="fas fa-cloud fa-2x"></i></span><div>Primary</div><div class="text-muted">.text-primary</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-info"><i class="fas fa-bell fa-2x"></i></span><div>Info</div><div class="text-muted">.text-info</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-success"><i class="fas fa-check-circle fa-2x"></i></span><div>Success</div><div class="text-muted">.text-success</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-warning"><i class="fas fa-exclamation-triangle fa-2x"></i></span><div>Warning</div><div class="text-muted">.text-warning</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-danger"><i class="fas fa-exclamation fa-2x"></i></span><div>Danger</div><div class="text-muted">.text-danger</div></div>
.fa-inverse
. <span class="fa-layers fa-2x">
<i class="fas fa-circle text-primary"></i>
<i class="fas fa-bell fa-inverse" data-fa-transform="shrink-8 down-.25 right-.25"></i>
</span>
.fa-xs
, .fa-sm
, .fa-lg
, .fa-2x
, .fa-3x
, .fa-5x
, .fa-10x
. <div class="text-muted">.fa-xs</div><i class="fas fa-chart-pie fa-lg"></i>
Power Transform rotating and flipping effects icon angle and reflection without changing or moving the container. To rotate or flip icons use any combination of rotate-#
, flip-h
with any arbitrary value.
<div class="fa-4x">
<i class="fas fa-magic" data-fa-transform="rotate-90"></i>
<i class="fas fa-magic" data-fa-transform="rotate-180" ></i>
<i class="fas fa-magic" data-fa-transform="rotate-270" ></i>
<i class="fas fa-magic" data-fa-transform="rotate-30" ></i>
<i class="fas fa-magic" data-fa-transform="rotate--30" ></i>
<i class="fas fa-magic" data-fa-transform="flip-v"></i>
<i class="fas fa-magic" data-fa-transform="flip-h"></i>
<i class="fas fa-magic" data-fa-transform="flip-v flip-h"></i>
</div>
Use the .fa-spin
class to get any icon to rotate, and use .fa-pulse
to have it rotate with 8 steps.
<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>