Please ensure Javascript is enabled for purposes of website accessibility FW Icon Boxes | University of West Florida
Skip to main content
Logo of University of West Florida

FW Icon Boxes

The FW Icon Boxes content type utilizes the Font Awesome Pro icon set with over 14,800 icons to choose from for web managers to add fully accessible graphics to their pages.

Important Information

Add one Icon Box per icon/column. There is no maximum number of icons you can use, but rows are limited to a max of 3 and new rows will start automatically. Visit the Font Awesome Icon Library to select your icon, and click or tap on your desired icon. Inside that page, copy out the icon class, e.g. "fab fa-500px". You will need this (without quotation marks) inside the content type to pull in your icon. OIC has purchased a pro account, so ALL icons at this link should be available for use.

At a Glance

  • Requires Placeholder: No
  • Placement: Almost anywhere
  • Special Setup: None
  • Image Sizes: Uses Font Awesome Icons. See below for more information. Background Image: 1280 x 550px

FW Icon Boxes contains the following elements:

Works best with 3-4 icons. Each icon box is a separate piece of content. The heading and row options only need to be entered once.

  • Name - Used in Sitemanager only. This does NOT show up on your webpage.
  • Heading - Row header, only needed for first column.
  • Header Type - H2 by default.
  • Heading Classes - Any additional classes to customize main header.
  • Reversed Out? - Determines whether text is white or black.
  • Row Padding Classes - Only use if you understand Bootstrap spacers.
  • Plain Background Image - Non-parallax style. Make sure you pick a translucent background.
  • Parallax Background Image - Parallax style. Make sure you pick a translucent background.
  • Background Color - Use this for a solid background (no image), or to set the inner color of Font Awesome stacks. May not work with parallax.
  • Background Gradient - Use this if you want an overlay over a background image.
  • Icon Size - See Font Awesome docs for examples.
  • FontAwesome Classes - The two icon classes from Font Awesome, e.g. “fas fa-user-graduate”
  • Icon Label - Enter a short description of the icon for accessibility.
  • Icon Color - Sets the color of the icon itself.
  • Title - Optional header text under the icon.
  • Title Header Type - H3 by default
  • Title Internal Link - Select List from Site Structure
  • Title External Link - Enter full link including https://
  • Body - Optional body text under the icon. Supports rich text such as bold, italics.

FW Icon Boxes: Example

Screenshot example of four separate Icon Boxes