Icons are a powerful tool in web design, combining functionality, aesthetics, and user-centric design principles to enhance the overall experience. They aid in various ways: 

  • Visual Communications & Quick Understanding: Icons help users quickly scan and understand actions and information without reading text.
  • Visual Recognition & Language-Neutrality: Common icons (like a magnifying glass for search) are easily recognize and draw attention to important features or information. Icons work across different languages, making sites more accessible globally.
  • Attractive & Uniform Design: Icons make websites look modern and visually appealing. Using a set of matching icons helps keep the website’s design consistent.Custom icons can reflect a brand’s style and personality.
  • Improve Navigation & Organization: Icons help users find their way around a site, like a home icon for the homepage. They help categorize and organize content. 
  • Simplification & Saving Space: Icons simplify the interface, making it easier to use taking up less space than text, which is especially useful on mobile devices.
  • User Feedback & Guidance: Icons can show guide users actions and show progress, like a loading spinner or a next arrow.

In Sitefinity

On UTMB websites we use Font Awesome, an online icon collection that gives you scalable vector icons that can instantly be customized.

There are many ways to add icons to content within Sitefinity websites. Here the most common:

  • Adding icons to content within the different content modules like Lists, Blogs, Events, etc.
  • Using pre-written classes and writing the HTML within the WYSIWYG is also an option but requires solid HTML and CSS knowledge.

Below we will explain the basics of using the icons and breakdown the options above.

The Basics

You can place Font Awesome icons just about anywhere, and we’ve tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.

Font Awesome has created some great online training which we recommend reviewing. However here are the basic steps to take when using icons on a website.

To add an icon, you need to know a few bits of information:

  1. The shorthand class name for the family you want to use (optional)
  2. The shorthand class name for the style you want to use
  3. The icon class name, prefixed with fa- (meaning “Font Awesome” naturally!)

Family, Style & Class


There are three families of Font Awesome icons - each with a unique look, class name, and font-family: Classic, Sharp & Brands. Font Awesome Classic is the default family, if you don’t specify a family class name, the icons will render as Classic.


In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons: Solid, Regular, Light, Thin & Duotone.


showing the placement of the icon nameAn Icon for every need! Browse the full list of icons to find the one that is right for the project. The Icon name is found directly below the icon. After searching, clicking on the icon which will open the Font Awesome customizer allowing users to copy the code.

Classic Family Example

StyleStyle classHTMLIcon
Solidfa-solid fa-user
<em class="fa-solid fa-user"></em>
Regularfa-regular fa-user
<em class="fa-regular fa-user"></em>
Lightfa-light fa-user
<em class="fa-light fa-user"></em>
Thinfa-thin fa-user
<em class="fa-thin fa-user"></em>
Duotonefa-duotone fa-user
<em class="fa-duotone fa-user"></em>

Sharp Family Example

StyleStyle classHTMLIcon
Solidfa-sharp fa-solid fa-user
<em class="fa-sharp fa-solid fa-user"></em>
Regularfa-sharp fa-regular fa-user
<em class="fa-sharp fa-regular fa-user"></em>
Lightfa-sharp fa-light fa-user
<em class="fa-sharp fa-light fa-user"></em>
Thinfa-sharp fa-thin fa-user
<em class="fa-sharp fa-thin fa-user"></em>
DuotoneComing Soon!  

Brands Family

StyleStyle classHTMLIcon
Brandsfa-brands fa-youtube
<em class="fa-brands fa-youtube"></em>


Font Awesome has a ton of great styling tools for the web that work hand-in-hand with the icons to really make your project look its best. Many of the styles can be combined to get even more effects. Below we breakdown the most commonly used options. 

Icon Size

By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them. In addition to that, Font Awesome comes with the following sizing tools.

Relative Sizing

Font Awesome includes a range of sizes from 2xs to 2xl that not only increase or decrease an icon’s size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This helps maintaining legibility and alignment alongside UI elements.

<em class="fa-solid fa-coffee fa-2xs"></em>
<em class="fa-solid fa-coffee fa-xs"></em>
<em class="fa-solid fa-coffee fa-sm"></em>
<em class="fa-solid fa-coffee"></em>
<em class="fa-solid fa-coffee fa-lg"></em>
<em class="fa-solid fa-coffee fa-xl"></em>
<em class="fa-solid fa-coffee fa-2xl"></em>

Literal Sizing

Font Awesome also includes a literal size scale to make increasing an icon’s size from 1x to 10x easy and efficient. Literal sizing is useful for sizing icons at a larger scale or in cases where text alignment isn’t a primary concern.

<em class="fa-solid fa-camera fa-1x"></em>
<em class="fa-solid fa-camera fa-2x"></em>
<em class="fa-solid fa-camera fa-3x"></em>
<em class="fa-solid fa-camera fa-4x"></em>
<em class="fa-solid fa-camera fa-5x"></em>
<em class="fa-solid fa-camera fa-6x"></em>
<em class="fa-solid fa-camera fa-7x"></em>
<em class="fa-solid fa-camera fa-8x"></em>
<em class="fa-solid fa-camera fa-9x"></em>
<em class="fa-solid fa-camera fa-10x"></em>

Icon Color

Use any of UTMB's Brand Colors to customize the color of an icon by adding the class name for that color. 

Gray Light
Blue Light
Green Light
Teal Light
<div><em class="fa-regular fa-user-circle fa-3x red" aria-hidden="true">&nbsp;</em> Red</div>
<div><em class="fa-regular fa-user-circle fa-3x gray" aria-hidden="true">&nbsp;</em> Gray</div>
<div><em class="fa-regular fa-user-circle fa-3x gray-light" aria-hidden="true">&nbsp;</em> Gray Light</div>
<div><em class="fa-regular fa-user-circle fa-3x white" aria-hidden="true">&nbsp;</em> White</div>
<div><em class="fa-regular fa-user-circle fa-3x black" aria-hidden="true">&nbsp;</em> Black</div>
<div><em class="fa-regular fa-user-circle fa-3x blue" aria-hidden="true">&nbsp;</em> Blue</div>
<div><em class="fa-regular fa-user-circle fa-3x blue-light" aria-hidden="true">&nbsp;</em> Blue Light</div>
<div><em class="fa-regular fa-user-circle fa-3x orange" aria-hidden="true">&nbsp;</em> Orange</div>
<div><em class="fa-regular fa-user-circle fa-3x green" aria-hidden="true">&nbsp;</em> Green</div>
<div><em class="fa-regular fa-user-circle fa-3x green-light" aria-hidden="true">&nbsp;</em> Green Light</div>
<div><em class="fa-regular fa-user-circle fa-3x teal" aria-hidden="true">&nbsp;</em> Teal</div>
<div><em class="fa-regular fa-user-circle fa-3x teal-light" aria-hidden="true">&nbsp;</em> Teal Light</div>

Sitefinity Modules

Content modules create collections of content that can be displayed on your web pages and in templates. The most common modules for content display which can also support icons are the Content BlocksListsBlogs and Events modules. Learn more about each of these by clicking on the provided links.

HTML & pre-written classes

The custom options when working with icons are endless, however, they require a solid knowledge of HTML and CSS. You can use the Font Awesome Documentation and create the custom code to achieve the desired effect in any content type which provides a WYSIWYG editor and has a display option of full HTML.

Things to note:

  • The FA style sheets are already part of the Sitefinity system, no need to link to them again
  • We do have a pro license, and advanced options are possible, however, over customization is never recommended, so use this wisely 
  • The FA Icon Wizard will help write the code based on the selections chosen
  • The WYSIWYG editor in Sitefinity will change the <i> tag to an <em>, this is expected and the icons will still look and function as expected 

On this page: