[b]Basic Use[/b] [code=css]<i class="fas fa-stroopwafel"></i> <span class="fas fa-stroopwa...

3339

Yangi formatda davom etish uchun: https://uzfor.net/view.php?act=post&id=56982

Postga havola

gi8ri7 [1900] [off]

Basic Use

<i class="fas fa-stroopwafel"></i>
<span class="fas fa-stroopwafel"></span>

Sizing Icons

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

Fixed Width Icons

<div style="font-size: 2rem;">
  <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
  <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
  <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
  <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
  <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
</div>

List Icons

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

Rotate & Flip

<div class="fa-4x">
  <i class="fab fa-font-awesome"></i>
  <i class="fab fa-font-awesome fa-rotate-90"></i>
  <i class="fab fa-font-awesome fa-rotate-180"></i>
  <i class="fab fa-font-awesome fa-rotate-270"></i>
  <i class="fab fa-font-awesome fa-flip-horizontal"></i>
  <i class="fab fa-font-awesome 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-stroopwafel fa-spin"></i>
</div>

Bordered + Pulled 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

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