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.
Use Text Format without CKEditor
You can create a new input format from:
Home >> Administration >> Configuration >> Content authoring >> Text formats and editors
example.com/admin/config/content/formats