Communications & Marketing
Communicators Toolkit

Set Up Website

Setting up your website includes creating the main navigation and sub-pages, and adding your department specific social media links and contact information. You also have the option to add an audience navigation for your secondary audience.

Social Media

Social media icons at the top of your header can be updated with links to your social media accounts. If the social media links are not updated the icons will link to SFU’s main social media accounts. Any social media links added to the header will automatically be added in the footer of your site. 

This is a sample of the social media navigation on a desktop setting
This is a sample of the social media navigation on a mobile setting

Best Practices

Only use icons provided to ensure correct size and consistency with SFU Brand. See CLF4 icons.

 How to

1. Navigate to your site’s homepage. 

Preview of a blank homepage

2. Open the Edit Inherited content in your sidekick (under Pages > Edit Inherited content)

The AEM sidekick with "Edit Inherited Content" selected

3. Find the social media icons on the top left of your page and edit the icons (to edit, right click on the box and select edit).

This is an image of the inherited content being edited

4. The icons are displayed in a text component.

  • a. Select the letter/icon you want to modify and click the hyperlink button in the rich text editor. 
This is an image of the Facebook icon in a text component being edited in the rich text editor
This is an image of a social media icon being hyperlinked
This is an image of a link being pasted in order to hyperlink a social media icon

5. The social media navigation bar uses HTML to add each social icon.  

To edit HTML, click on the Source Edit button on the text editor window

  • Facebook - <span class="icon icon-facebook"></span>  or  <i class"icon icon-facebook"></i> 
  • Twitter - <span class="icon icon-twitter"></span>  or  <i class"icon icon-twitter"></i>
  • Instagram - <span class="icon icon-instagram"></span>  or  <i class"icon icon-instagram"></i>
  • YouTube - <span class="icon icon-youtube"></span>  or  <i class"icon icon-youtube"></i>
  • LinkedIn - <span class="icon icon-linkedin"></span>  or  <i class="icon icon-linkedin"></i>
This is an image showing how to source edit text

TIP:

  • The icons and links can also be edited by using the Source Edit button in the text component using HTML formatting:

<a href="https://www.facebook.com/simonfraseruniversity"><span class="icon">F</span></a>

Resources

Communicators Toolkit
Search
close