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
- fa fa-phone ( Phone Icon )
- fa fa-envelope-o ( Outline of an Envelope Icon )
- fa fa-map-marker ( Map Marker Icon )
- fa fa-twitter ( Twitter logo )
- fa fa-twitter-square ( Square with Twitter logo )
- fa fa-instagram ( Instagram logo )
- fa fa-facebook ( Facebook logo )
- fa fa-facebook-official ( Square with Facebook logo )
- fa fa-pinterest ( Pinterest Font Awesome Icon )
- fa fa-pinterest-square ( Square with Pinterest logo )
- fa fa-linkedin ( LinkedIn Font Awesome icon )
- fa fa-linkedin-square ( Square with LinkedIn icon )
- fa fa-youtube ( YouTube Font Awesome Icon )
- fa fa-youtube-play ( YouTube Play Font Awesome Icon )
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.
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.
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.
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.