Fontawesome

Fontawesome is a module that allows you to bring icons to your website without having to upload them. Just think of the icon for an airport, a toilet, fire hazard, etc ...

Fontawesome works with an external library. You have the choice to install it in /libraries/fontawesome or have it loaded via a CDN

This module provides a CKEditor plugin to allow users to select Fontawesome icons directly from the editor, as well as a Fontawesome Icon Field to attach directly to entities.

In the settings of CKEditor (admin/config/content/formats) the plugin must be added to the active toolbar. We choose the Full HTML editor here.

Toolbaar

When creating for example a simple page, you set the settings of CKEditor to Full HTML and click on the Fontawesome icon. A popup appears with an autocomplete field where you enter the name of the icon. A list of all available icons can be found here.

Select icon

Select the desired icon and it will appears in the editor.

The source code looks like:
Sourcecode
You insert a class that transforms into an icon.

 

You can also add Fontawesome as a field in a content type. Here you get the icon as a separate field, so you can use it in a view.

Fontawesome Field

An autocomplete field is provided to enter the name of the icon.

By default, the icons are black and rather on the small side, but with some css both the color and the size can be adjusted.

For example:

.fa-accessible-icon{
   color: red;
   font-size: 4em;
}

Will give this result:
fa-accessible-icon