Facebook Pixel Font Awesome Icons | Western Kentucky University Skip to main content

Font Awesome Icons


WKU's site includes the Font Awesome iconic font set and can be used anywhere on your site. Use of these icons can add extra dimensions to the content on your page and make content more engaging. Below, we outline the steps needed to make use of these icons on your pages.

Available Icons

 

Common Font Awesome Icons

 

Custom WKU-Themed Icons

To use the following WKU-themed icons, you will need to include an additional class, fa-wku.

  • fa fa-wku fa-big-red )
  • fa fa-wku fa-cupola )
  • fa fa-wku fa-red-towel )
  • fa fa-wku fa-dean-list )
  • fa fa-wku fa-pres-list )

Additional non-WKU themed custom icons.

  • fa fa-wku fa-astra )
  • fa fa-wku fa-blackboard )
  • fa fa-wku fa-outlook )
  • fa fa-wku fa-ms-exchange )
  • fa fa-wku fa-fish-hook )

 

Adding Font Awesome Icons to Your Page

Start by placing your cursor where you'd like to insert the icon. Then open the the Insert/Edit Link dialog by either right-clicking anywhere in the WYSIWYG editor and choosing Insert/Edit Link from the pop-up menu, or clicking the Insert/Edit Link button (  ) from the toolbar.

 

JustEdit WYSIWYG toolbar, showing Insert/Edit Link button
Right-click menu showing Insert/Edit Link option

 

From the Insert/Edit Link dialog, type # into the URL field, and something meaningful into the Text to display field; we suggest typing the Font Awesome name for the icon to be used. However, anything can be used, as it will not be seen unless editing the page content. Filling in these two fields (URL and Text to display) is important, as the WYSIWYG will strip out your code if they are left empty, and you will not see your Font Awesome icon displayed.

Additionally, select (custom) from the Class dropdown list. This should display an additional input field just below the Class dropdown list.

 

Insert/Edit Link Dialog showing the the Class dropdown list open and (custom) selected

 

In the custom Class field, type your Font Awesome classes. In the example image we are wanting to use the Font Awesome bath icon, so the custom Class value we have entered is fa fa-bath. We got this code by visiting Font Awesome's site and copy and pasting the code example they give.

 

Insert/Edit Link dialog showing completed fields

 

When done click the OK button. You should now see the Font Awesome icon you selected, followed by the text you specified in the Text to display field of the Insert/Edit Link dialog. If you were to save your page and preview it at this point, the Font Awesome icon will be shown in its fully rendered form.

 

WYSIWYG in Edit mode, showing raw Font Awesome link

WYSIWYG in Preview mode, showing rendered Font Awesome icon

 

Colors

In most cases you should be able to change the color of an icon using the WYSIWYG Styles. When inserting an icon inside of a snippet you may find that the extra styles to change color have been removed. To ensure that your desired color stays after saving your snippet you can use any of the classes below.

WYSIWYG in Edit mode, showing a color class on a FA Icon

After following the steps outlined under "Adding Font Awesome Icons to Your Page" you can add an additional value to the Custom Class input. Remember to add a space between any values.

  • Default
  • text-primary (WKU Red)
  • text-primary-darker (WKU Red Darker)
  • text-muted (Muted Gray)
  • text-gray-darker (Darker Gray)
  • text-danger (Danger Alert)
  • text-warning (Warning Alert)
  • text-info (Info Alert)
  • text-success (Success Alert)



Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 9/17/18