Icons can be used to draw attention to information and resources within or beyond your site, such as on social media sites. 

WP2 Implementation

In WP2, icons were added by copying and pasting markup (like the following) into the source code: 

<a class="twitter-icon" href="">

Connect with Queen's on Twitter</a>


After the markup was inserted into the page, the user could switch back to the WYSIWYG editor and double click the default text to modify their link text and add a URL.

Migrating to WP3

To add a social media icon to page content:

  1. Navigate to the page where the social media icon should be added
  2. Locate where on the page the icon should be added. It will need to be added to a field that contains a WYSIWYG editor. This will most likely be one of the following places:
    • The main page body
    • An extra body paragraph
    • two column body paragraph
  3. Use the font awesome icon in the WYSIWYG editor to search for the correct icon (e.g., “facebook”)


WYSIWYG editor image with font awesome icon highlighted


4. Once the icon has been inserted on the page, click the source code

5. You’ll need to manually add the hyperlink in the source code. Add the yellow highlighted portions of markup below and insert the URL from the WP2 site in the href quotations. You can optionally increase the size of the icon by adding the blue highlighted portion:


<p>< a href=""><span class="fontawesome-icon-inline"><i class="fab fa-twitter-square fa-3x"></i></span></a></span></p>