Add Font Awesome icons

Using symbols such as icons to augment the text on your website can improve comprehension and clarify your message.

 You can add icons in text fields that use HTML text format. To add icons, you'll need to edit the HTML directly.

Accessibility

If your icons have semantic meaning, include this information in the text near the icon. 

Learn more about semantic icons.

Add Font Awesome icons

Your Stanford Sites website supports the use of Font Awesome icons. 

For accessibility purposes, if the icon conveys meaning, then add the same meaning in adjacent text so users who cannot see the icon or do not understand the icon will receive the same information.

1. Search Font Awesome’s v5 free icon database and choose the icon you want to use, then click Start Using This Icon

2. Copy the code provided by Font Awesome. This will look something like  class="fa fa-drupal".
3. In the text area toolbar, click on Source.
4. Find the text where you want to add the icon. 
5. Paste the Font Awesome code as a CSS class to a <p>, <span>, or <h[2-5]>. This will look like: 
   <p class="fa fa-drupal”> 
6. Click on Source to switch back to the WYSIWYG editor to see the icon displayed in the editor.
7. Scroll down and click Save.

Here's an example:

This website uses Drupal.

Adding an icon as a link

You may want to display just an icon for a link. To make it accessible, however, you must include a label for non-visual visitors. You can use the CSS class sr-only to hide the text for visual visitors. 

Note: It is best to use visible text to make the meaning of the icon clear to all users, including those who may be unfamiliar with the icon.

1. Edit the page and click Source. 

2. Add the CSS class sr-only to a <span> around the text you want to hide. For example:

   <a href="https://open.spotify.com/">
     <i class="fa fa-brands fa-spotify">
      <span class="sr-only">Spotify</span>
     </i>
   </a>

Here's how it looks:

Sp

Note: If you don't want the external link icon to display, it is possible to hide the External Link icons. 

Troubleshooting

After adding an icon and hitting enter, the same icon appears again

In order to continue adding text, you will need to switch to the Source view and remove the class=" " from the <p> tag.

Then, type a new paragraph tag <p></p>

Click on Source to switch back to the text editor. Now you can type in the empty paragraph below the paragraph with the icon.

I copied the code but it is not working

The code may need some adjustments. Try updating the code similar to this 

<p class="fa fa-solid fa-podcast"> or <p class="fas fa fa-newspaper-o">

My edits disappear

When adding an icon to a <span>, the <span> must have some content or upon saving, the WYSIWYG will remove it assuming it is empty. To fix this, add a <span> tag with a single space:

<span class="fas fa-lock"> </span> 

Given this example:

<p>        
  <a href="https://drive.google.com/file/d/filename">Stanford's TPR proposal </a>        
  (May 2021)        
    <span class="fas fa-lock"> </span>        
</p>

It will look like this:

 Stanford's TPR proposal   (May 2021)