Skip to main content Skip to secondary navigation

Add Font Awesome icons

Main content start

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

Font Awesome is the next generation of the web’s favorite icon library + toolkit. Your Stanford Sites website supports the use of Font Awesome and social media icons. You can place these in text editors that use HTML Text Format.

Adding Font Awesome icons

  1. Verify that the text editor you are using supports the HTML Text Format. Search Font Awesome’s 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 paragraph, click on Source.
  4. Find the text where you want to add the icon. Hint: you can use the browser search functionality (cmd+F or ctrl+F) to help you locate the text.
  5. Paste the Font Awesome code as a CSS class to the <p>.
    This will look like <p class="fa fa-drupal”> 
    Screenshot of source code displaying Font Awesome class
  6. Click Continue (or click on Source to switch back to the WYSIWYG editor to see the icon displayed in the editor).
     
    Screenshot of Body
    Screenshot of Body 2
  7. Scroll down and click Save.

Accessibility

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

Learn more about semantic 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.

Screenshot fab fa-drupal

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

Screenshot fab fa-drupal 2

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

Code 3