FontAwesome V4 Font Icons

There are 675 icons FREE for you to use when building your site with FontAwesome.

What is FontAwesome

FontAwesome is a font made up entirely of icons.
It's a special font with icons instead of letters, numbers etc. You don't have to use images or sprite-sheets anymore. FontAwesome is fully customizable and responsive.

What icons are available in FontAwesome

There are 675 icons which you can use with themes using FontAwesome.
Please visit below url for full list of icons available in FontAwesome version 4.7.0
https://fontawesome.com/v4.7.0/icons/

How To Use FontAwesome

1) Visit icons page: https://fontawesome.com/v4.7.0/icons/

2) Click on the icon that you want to use.

3) You will get the icon code of that icon. Just copy paste the code on your Drupal website to use this icon.

Example:

<i class="fa fa-address-book" aria-hidden="true"></i>

How to change size Of icon

The default size of font icons is 1em / 16px.
But you can change size of any icon by adding size class in the icon code.
fa-2x, fa-3x, fa-4x, fa-5x

Example:

<i class="fa fa-camera-retro"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Other Customization

There are lots of customization available with FontAwesome icons. Please visit below url for details.
https://fontawesome.com/v4.7.0/examples/

FontAwesome with CKEditor

CKEditor by default filter out <i></i> tag and thus remove FontAwesome icons.
When creating content, use Full HTML text format and write content in Source mode.

image

Use Text Format without CKEditor

We recommend to create and use a new text input format like Full HTML but without CKEditor editor as explained here: Create a new Text Format without CKEditor in Drupal 8

You can create a new input format from:
Home >> Administration >> Configuration >> Content authoring >> Text formats and editors

example.com/admin/config/content/formats