collective.fontawesome

Font Awesome for Plone


Keywords
web, zope, plone, diazo, theme, cms, fontawesome, icons
License
GPL-2.0+
Install
pip install collective.fontawesome==1.1

Documentation

image

collective.fontawesome

This add-on registers Font Awesome into Plone CSS registry.

Features

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.

Warning

ie7 support has been removed

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".

https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

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:

image

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:

image

Contribute

Credits

Companies

People

License