Skip to main content
MyCoE

Icon

Icons are a good way to increase visual interest and call attention to information.

Font Awesome How to add an icon Icon packs and styles Social media icons

Font Awesome

UW Engineering MarCom uses Font Awesome icons throughout the site. Choose from thousands of icons and select styles within our icon packs. We have the following combinations of icon packs and styles available on Drupal: Brands, Classic (Solid, Regular, Light), and Sharp Duotone (Regular). CoE and department sites have access to version 6.7.2 of Font Awesome, so please keep that in mind when searching for an icon to use on a web page.

How to add an icon

For many blocks in Drupal 2.0, an icon is added via a field with the icon name. The Card Button block is a good example of this. In other cases, use the <i> tag with the appropriate class names for the icon and style. Font Awesome provides a very convenient click-to-copy method on their site for getting the code snippets for any icon.

Screenshot of Card Button block's icon field
Screenshot of Font Awesome interface click-to-copy

Icon packs and styles

Classic

Solid

Regular

Light

Code

<i class="fa-solid fa-mountain-city fa-4x text-primary"></i>
<i class="fa-regular fa-mountain-city fa-4x text-primary"></i>
<i class="fa-light fa-mountain-city fa-4x text-primary"></i>
  • Font Awesome class names are always prefixed with 'fa-'
  • solid, regular, and light are the styles
  • mountain-city is the name of the icon
  • 4x is the relative size of the icon (optional)
  • text-primary updates the color of the icon using our Bootstrap classes

Sharp Duotone

This set of icons only has the Regular style available. Additionally, Sharp Duotone icons currently only support the Husky Purple and Accent Lavender color combination as shown below.

Code

<i class="fa-sharp-duotone fa-regular fa-gear-code fa-5x"></i>
<i class="fa-sharp-duotone fa-regular fa-lightbulb-on fa-5x"></i>
<i class="fa-sharp-duotone fa-regular fa-icons fa-5x"></i>

Social media icons

These icons come from the Brands icon pack but are implemented with the <a> tag to be linked.

           

Code

<a class="social-icon facebook text-decoration-none" href="/social-link"></a>
<a class="social-icon youtube text-decoration-none" href="/social-link"></a>
<a class="social-icon instagram text-decoration-none" href="/social-link"></a>
<a class="social-icon linkedin text-decoration-none" href="/social-link"></a>