Skip to main content

hero banner

Font Awesome Icons

Font Awesome icons are a font collection of scalable, vector-based icons that can be customized to your site's design. There are thousands to choose from, and you can customize the size, color, and just about any other attribute. They provide visual interest to your content and make it easier to scan.

Example

Folwell has been built to include the Font Awesome 5.0 library. 

Usage

Recommended Usage

Font Awesome is a library of icons that can be implemented in the site. ​Recommended usage of the icons is to define them in CSS. Work with your local developer to implement this.

There are four important parts to include when referencing any individual icon using CSS pseudo-elements:

  1. Set the pseudo-element to match either the ::before or ::after
  2. Set the font-family to Font Awesome 5 Free
  3. Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)
  4. Set the content to the unicode value of the icon you want

Example

/* Reference Individual Icons */
.folder::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f07c";
}

CKEditor Alternative

Please note: Including Font Awesome in the CKEditor is another alternative, but it must be set up carefully. Take care not to disable any filters or accidentally rearrange or enable/disable any filters. Improper configuration can cause security issues and may make some features not work.

  1. Navigate to Configurations > Content authoring > Text formats and editor.
  2. Select Folwell CKEditor from the list and click “configure” button.
    configure ckeditor example
  3. The Font Awesome Icon plugin is represented by the Font Awesome flag. Simply drag it to the last position of the Tools section of the toolbar.
    toolbar configuration example
  4. Scroll down and make sure your “Filter processing order” section has the sections in the following order.
    filter order example
  5. The Font Awesome flag icon will now be available to you in the Folwell CKEditor. Note: the Font Awesome flag looks similar to the Anchor flag. The Font Awesome flag appears slightly wider. Mousing over the icons will display the name of the icon.
    font awesome in ckeditor example
  6. To add a Font awesome icon, you can either find the icon names from the Font Awesome icons list, or you can simply begin typing and the autocomplete will show you the available icons with that name.
    additional font awesome settings example
  7. After selecting an icon, you can then choose from the icon settings under the “Additional Font Awesome Settings” header. This allows you to choose icon weight, icon size, and many other options.
    additional font awesome settings example

Best Practice

When using icons, it is important for accessibility and comprehension to include text that provides meaning. The icon cannot stand alone as a label.

Accessibility

Font Awesome icons are fully accessible and have been tested for usability.