The well-known "Font Awesome" icons are available to use on the site. These are like the icons that we use for social media and other standard icons.

One requirement is that you have to paste these in using "Edit Source" view, so if you're not comfortable using that, you may wish to ask us for help.

 

The site has now been upgrade to use Font Awesome v6. (Only the free icons, of course.)

https://fontawesome.com/search?m=free&o=r

 

The code used to insert an icon looks like this:

 <span class="fa fa-calendar" aria-hidden="true"></span>

NOTE: The font awesome site uses "<i>" tags but Sharepoint does not understand these tags. Using a <span> tag works exactly the same though. The highlighted area is where the selected icon goes. In this case it is the calendar icon, but it could be fa-book, fa-check, fa-hashtag, etc.

 

Here are those four examples: 

 

You can also scale the icons nicely by using the additional classes. The code and examples for this are below:

   <span class="fa fa-calendar fa-2x" aria-hidden="true"></span>
   <span class="fa fa-book fa-3x" aria-hidden="true"></span>
   <span class="fa fa-check fa-4x" aria-hidden="true"></span>
   <span class="fa fa-hashtag fa-5x" aria-hidden="true"></span>

 

 

These fonts should normally react to color changes the same way regular text will. As always, contact us at iss-webservicesteam@pbcgov.org and we can help.