Font Awesome icons

Avatar
Michael Reid

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.

650+ icons for you

You can use any of 650+ icons free of charge anywhere in your Help Center (layout, articles, etc.). They are already included in all our themes. Find all Font Awesome icons and their codes on this page.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon to any text of your Help Center  . 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 Help Center <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:

 
 

fa-twitter and fa-square-o

 
 

fa-flag and fa-circle

 
 

fa-terminal and fa-square

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

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.