Icons
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.
- View the full list of Version 6 icons (Pro supported)
- View the full list of Version 4.7 icons (deprecated)
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:
- The shorthand class name for the family you want to use (optional)
- The shorthand class name for the style you want to use
- The icon class name, prefixed with
fa-(meaning “Font Awesome” naturally!)
Family, Style & Class
Family
- 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.
Style
- In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons: Solid, Regular, Light, Thin & Duotone.
Icon
An 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
| Style | Style class | HTML | Icon |
|---|---|---|---|
| Solid | fa-solid fa-user | <em class="fa-solid fa-user"></em> | |
| Regular | fa-regular fa-user | <em class="fa-regular fa-user"></em> | |
| Light | fa-light fa-user | <em class="fa-light fa-user"></em> | |
| Thin | fa-thin fa-user | <em class="fa-thin fa-user"></em> | |
| Duotone | fa-duotone fa-user | <em class="fa-duotone fa-user"></em> |
Sharp Family Example
| Style | Style class | HTML | Icon |
|---|---|---|---|
| Solid | fa-sharp fa-solid fa-user | <em class="fa-sharp fa-solid fa-user"></em> | |
| Regular | fa-sharp fa-regular fa-user | <em class="fa-sharp fa-regular fa-user"></em> | |
| Light | fa-sharp fa-light fa-user | <em class="fa-sharp fa-light fa-user"></em> | |
| Thin | fa-sharp fa-thin fa-user | <em class="fa-sharp fa-thin fa-user"></em> | |
| Duotone | Coming Soon! |
Brands Family
| Style | Style class | HTML | Icon |
|---|---|---|---|
| Brands | fa-brands fa-youtube | <em class="fa-brands fa-youtube"></em> |
Customizations
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.
<div><em class="fa-regular fa-user-circle fa-3x red" aria-hidden="true"> </em> Red</div> <div><em class="fa-regular fa-user-circle fa-3x gray" aria-hidden="true"> </em> Gray</div> <div><em class="fa-regular fa-user-circle fa-3x gray-light" aria-hidden="true"> </em> Gray Light</div> <div><em class="fa-regular fa-user-circle fa-3x white" aria-hidden="true"> </em> White</div> <div><em class="fa-regular fa-user-circle fa-3x black" aria-hidden="true"> </em> Black</div> <div><em class="fa-regular fa-user-circle fa-3x blue" aria-hidden="true"> </em> Blue</div> <div><em class="fa-regular fa-user-circle fa-3x blue-light" aria-hidden="true"> </em> Blue Light</div> <div><em class="fa-regular fa-user-circle fa-3x orange" aria-hidden="true"> </em> Orange</div> <div><em class="fa-regular fa-user-circle fa-3x green" aria-hidden="true"> </em> Green</div> <div><em class="fa-regular fa-user-circle fa-3x green-light" aria-hidden="true"> </em> Green Light</div> <div><em class="fa-regular fa-user-circle fa-3x teal" aria-hidden="true"> </em> Teal</div> <div><em class="fa-regular fa-user-circle fa-3x teal-light" aria-hidden="true"> </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 Blocks, Lists, Blogs 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