Icons

For icons, we use FontAwesome, a web service that we pay for. It's technically a web font that lets us use icons on our web pages without having to create or maintain image files ourselves. The icons load as SVGs. There are about a zillion icons to choose from.

We use the Classic, Light style of FontAwesome (not Solid, Duo Tone, Sharp, etc.).

Example icons

Calendar:

Info:

Laptop/mobile:

Telescope:

Tomato:

How to use an icon

• Search FontAwesome for your keywords
• Non-members of Web Team: Email the Web Team and ask for that icon to go on the page you're editing
• Web Team members: Copy the HTML on the icon's page and paste it into the source code for the page. Example: <i class="fa-light fa-house"></i>

Limitations of using icons

• Since it uses special HTML code, the Web Team has to make the page the icon is on editable in HTML by website admins only. In other words, if you ask Web Team to use an icon on a certain page, you'll no longer be able to edit that page yourself (if you had editing privileges in the first place).
• Never use an icon by itself. Always use it in conjunction with a textual label. This makes the icon more accessible, since not everyone may understand the icon alone.