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

Font Awesome icons

UW Engineering MarCom subscribes to FontAwesome's professional icon series. There are thousands of options to choose from that will suit a variety of purposes. Choose from the Solid, Regular, Light and Brand libraries. We're in the process of upgrading to the latest version of Font Awesome; in the mean time, please use icons from version 5.15.4 by selecting 5.15.4 rom the search dropdown.

Code

<i class="far fa-tools fa-2x">&nbsp;</i>

• far is regular weight | fal is light weight
• fa-tools is the code for the specific icon
• fa-2x is the relative size of the icon (optional)
• Make sure to add a non-breaking space   in between the i tags as Drupal automatically deletes empty tags.

Social media icons

Code

<a class="social-icon facebook" href="/link">&nbsp;</a>
<a class="social-icon twitter" href="/link">&nbsp;</a>
<a class="social-icon youtube" href="/link">&nbsp;</a>
<a class="social-icon instagram" href="/link">&nbsp;</a>
<a class="social-icon linkedin" href="/link">&nbsp;</a>

File types icons

A link to a PDF
A link to a Word document
A link to an Excel spreadsheet
A link to a PowerPoint presentation

Code

<a class="pdflink" href="/file_path.pdf">PDF title</a>
<a class="doclink" href="/file_path.docx">Document title</a>
<a class="xlslink" href="/file_path.xlsx">Spreadsheet title</a>
<a class="pptlink" href="/file_path.ppt">PowerPoint title</a>