Font Awesome icons

Jeffrey Davis

Modified on: Sat, 13 Jun, 2020 at 9:49 PM

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 670+ icons free of charge anywhere in your support portal (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 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:

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>