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. To learn more about Font Awesome and what they are all about, you can take a look at their website http://fontawesome.io.

 

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

 


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

 Last Modified 5/31/18