Features

• Version of Font Awesome: 5.2.0.

• Includes a GenericSetup profile example for Replacing Plone’s default icons with FontAwesome fonts.

• Includes a Example View working, go to http://site_url/@@example.collective.fontawesome

Translations

This product has been translated into

• Spanish (thanks, Leonardo J. Caballero G. aka macagua)

Installation

This add-on can be installed with the typical Plone add-on installation process. Please see the official documentation for a description.

For Plone 5, import the “collective.fontawesome (Plone 5)” profile.

How to use

Since version 5, FontAwesome changed the way it works and the Free version includes 2 fonts : “Font Awesome 5 Free” and “Font Awesome 5 Brands”.

Depending on the icon you want to use, you have to use the “fa” or “fab” class :

To use an icon from the “Font Awesome 5 Free” add class=”fa fa-X”, to use an icon from “Font Awesome 5 Brands”, add class=”fab fa-X” to your tag where X is the icon you want:

<ul>
    <li class="fa fa-glass-martini">item 1</li>
    <li class="fa fa-music">item 2</li>
    <li class="fa fa-search">item 3</li>
</ul>
<ul>
    <li class="fab fa-angular">item 1</li>
    <li class="fab fa-apple">item 2</li>
    <li class="fab fa-avianex">item 3</li>
</ul>

Or just use CSS for your class ‘myclass’:

.myclass:before {
    content: "\f000";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Available CSS classes and values for the content attribute can be found in the Font Awesome cheat sheet or in the source code (file: font-awesome.css#L171 at the time of writing).

Full list of useable icons may be found here : Font Awesome free icons

An example page is available in the add-on, here is a screenshot:

Replacing Plone’s default icons with FontAwesome fonts

There is now a separate Generic Setup profile called replace-plone-icons which will replace Plone’s default icons (e.g. for content types and actions) with Font Awesome icons.

IMPORTANT: You still need to install the default profile as well.

A replace-plone-icons profile example is available in the add-on, here is a screenshot:

Contribute

• Issue Tracker: https://github.com/collective/collective.fontawesome/issues

• Source Code: https://github.com/collective/collective.fontawesome

Credits

License

• The Font Awesome font is licensed under the SIL Open Font License http://scripts.sil.org/OFL

• Font Awesome CSS, LESS, and SASS files are licensed under the MIT License https://opensource.org/licenses/mit-license.html

• The Font Awesome pictograms are licensed under the CC BY 3.0 License https://creativecommons.org/licenses/by/3.0/

• Attribution is no longer required in Font Awesome 3.0, but much appreciated: “Font Awesome by Dave Gandy - https://fontawesome.com/ “

Changelog