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.
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.
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.
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.
- 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)