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.
1500+ icons for you
You can use any of 1500+ 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="fas fa-flag"> </em>. Font Awesome is completely
free for commercial use <em class="fas fa-hand-left"> </em>. The icons are vector, which means they're gorgeous on high-resolution displays <em class="fas fa-eye"> </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="fas fa-pencil-alt"> </em>.
</p>
Please note that Zendesk's editor removes empty tags added to the source code. Make sure that you are adding non-breaking space to the code. For example, instead of:
<em class="fas fa-pencil"> </em>use:
<em class="fas fa-pencil"> </em>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="fas fa-2x fa-motorcycle"> </em> Title with a motorcycle</h4>
<h4 class="wysiwyg-color-green120"><em class="fas fa-2x fa-calculator"> </em> Title a the calculator</h4>
<h4 class="wysiwyg-color-pink"><em class="fas fa-2x fa-binoculars"> </em> Title with binoculars</h4>
<h4 class="wysiwyg-color-red"><em class="fas 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="fas 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="fas fa-spinner fa-spin fa-3x fa-fw"> </div>
<div class="fas fa-circle-notch fa-spin fa-3x fa-fw"> </div>
<div class="fas fa-sync fa-spin fa-3x fa-fw"> </div>
<div class="fas fa-cog fa-spin fa-3x fa-fw"> </div>
<div class="fas fa-venus fa-spin fa-3x fa-fw"> </div>
<div class="fas fa-mars fa-spin fa-3x fa-fw"> </div>
<div class="fab fa-firefox fa-spin fa-3x fa-fw"> </div>
<div class="fab fa-opera fa-spin fa-3x fa-fw"> </div>
<div class="fab fa-chrome fa-spin fa-3x fa-fw"> </div>
And mix them:
fab-twitter and fa-square
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="fas fa-square fa-stack-2x"> </div>
<div class="fab fa-twitter fa-stack-1x"> </div>
</div>
<p>fa-twitter and fa-square</p>
</div>
<div style="display: inline-block; margin-right: 20px;">
<div class="fa-stack fa-lg">
<div class="fas fa-circle fa-stack-2x"> </div>
<div class="fas 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="fas fa-square fa-stack-2x"> </div>
<div class="fas fa-terminal fa-stack-1x fa-inverse"> </div>
</div>
<p>fa-terminal and fa-square</p>
</div>
</div>
Hire an expert
Ask a question