Font Awesome icons

Font Awesome is a variety of scalable vector icons that can instantly be customized — size, color, shadow, and other changes that can be done with the power of CSS.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon to any text of your support portal  . Font Awesome is completely free for commercial use  . The icons are vector, which means they're gorgeous on high-resolution displays  . It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS  .

<p>It is rather simple to insert a Font Awesome icon to any text of your support portal <em class="fa fa-flag">&nbsp;</em>. Font Awesome is completely free for commercial use <em class="fa fa-hand-o-left">&nbsp;</em>. The icons are vector, which means they're gorgeous on high-resolution displays <em class="fa fa-eye">&nbsp;</em>. It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS <em class="fa fa-pencil">&nbsp;</em>.</p>

Font Awesome titles

You can use any icons from Font Awesome library for making your titles more stylish and memorable!

  Title with a motorcycle

  Title with a calculator

  Title with binoculars

  Title with a heartbeat

<h4><em class="fa fa-2x fa-motorcycle"> </em> Title with a motorcycle</h4>
<h4 class="wysiwyg-color-green120"><em class="fa fa-2x fa-calculator"> </em> Title a the calculator</h4>
<h4 class="wysiwyg-color-pink"><em class="fa fa-2x fa-binoculars"> </em> Title with binoculars</h4>
<h4 class="wysiwyg-color-red"><em class="fa fa-2x fa-heartbeat"> </em> Title with a heartbeat</h4>

And not only your titles:

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

<div class="fa fa-quote-left fa-3x fa-pull-left fa-border"> </div>
<p>Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Animate them!

<div class="fa fa-spinner fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-refresh fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-cog fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-venus fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-mars fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-firefox fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-opera fa-spin fa-3x fa-fw"> </div>
<div class="fa fa-chrome fa-spin fa-3x fa-fw"> </div>

And mix them:

<div style="text-align: center;">
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fa fa-square-o fa-stack-2x"> </div>
      <div class="fa fa-twitter fa-stack-1x"> </div>
    </div>
    <p>fa-twitter and fa-square-o</p>
  </div>
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fa fa-circle fa-stack-2x"> </div>
      <div class="fa fa-flag fa-stack-1x fa-inverse"> </div>
    </div>
    <p>fa-flag and fa-circle</p>
  </div>
  <div style="display: inline-block;">
    <div class="fa-stack fa-lg">
      <div class="fa fa-square fa-stack-2x"> </div>
      <div class="fa fa-terminal fa-stack-1x fa-inverse"> </div>
    </div>
    <p>fa-terminal and fa-square</p>
  </div>
</div>