Enhancing Your Web Pages with Font Awesome Icons
Bits & Bytes Recap
In our recent forum, we explored the powerful capabilities of Font Awesome icons and how they can elevate the user experience on your web pages. Here’s a recap of
the key points we discussed:
The importance of icons
According to a principle from the Nielsen Norman Group: “icons must first and foremost communicate meaning.” Effective icons are not just decorative; they provide quick recognition and visual appeal, making them essential for international users who may not share the same language.
Introduction to Font Awesome
Font Awesome is an extensive icon library featuring over 33,000 icons in ten different styles. These icons can significantly enhance your pages and side navigation by conveying information at a glance. Our Font Awesome icons component has been updated. While previously added icons will still function, they may lack the new styling options.
How to add icons
The process of adding Font Awesome icons is pretty straightforward:
- Icon placement: Place your cursor where you would like the icon to reside. You may want to utilize the styling dropdown for placement.
- Find the icon component: In the WYSIWYG toolbar, look for the component icon that resembles an atom molecule.
- Select v3-Font Awesome Icon and then click Insert to open a pop-up with styling options.
- Choose your icon: Type or copy and paste the name of your desired icon, which can be found on the
Font Awesome website. Remember to paste the icon name exactly as it appears, including any dashes.
- A fun perk: you can access pro icons without needing an account!
Styling options
Font Awesome offers a variety of styling options:
- Icon styles: Choose from Classic (rounded), Sharp (pointed corners), or Brand (specific logos). Note that branded icons cannot be styled as Classic or Sharp.
- Icon variants: Select from five styles—Solid, Regular, Light, Thin, and Duotone. Each style offers a unique look, from solid colors to outlined designs.
New features
Updates to Font Awesome include a broader range of icon sizes (from text size to 10x) and the integration of the University’s marketing colors. Please keep color contrast in mind when utilizing the secondary colors.
We also added CSS styling options and a custom class name, although these can be complex, so it’s often best to leave them blank. After saving your changes, your newly styled icon will appear. Need to edit the icon? No problem. Just click the pencil icon to make updates.
Accessibility considerations
One of the key takeaways from this forum is the importance of accessibility. Our Font Awesome component treats icons as decorative elements, meaning they won’t be read by screen readers. It’s essential to convey any meaning through adjacent text. If you want your icon to act as a link, simply place the relevant link and text above or below it.
Q & A
Q: What do you do if my icon doesn’t match up with my link text?
A: One thing to consider is if the icon selected is the best icon. Try looking through the FontAwesome library for other options or asking Copilot or ChatGPT for suggestions. You could also consider changing the link text to better fit the icon selected but still convey the same meaning as before. If both options have been exhausted, try swapping out the icon for an image or consider if this is the best place to add a visual graphic.
Q: When is it appropriate (or not) to use the University branded secondary colors?
A: The University branded accent (or secondary) colors are meant to be used sparingly and should be complementary and subordinate to Utah Red and black. It is recommended to avoid using them as stand-alone colors to help avoid confusion between other university colors.
Also note that some colors, if used as a panel background color, can cause accessibility color contrast errors. If an accent color is going to be used, verify the foreground (text) and background colors have enough contrast. The WebAIM Contrast Checker is a great resource to use.
If you have any other questions about University approved colors and their purpose, check out the University Color Brand Guidelines for information.
Q: I want to change my panel flip-cards to something different as a better design, what are some options?
A: Panel Flip cards are often used on faculty and staff directory pages to display core contact information on the front side and then a bio on the back. Sometimes, the information on one side is significantly longer than the other. Some alternative options are these:
- Consider using Copilot or ChatGPT to shorten the bio’s to a specific word count that will work best with your design (making sure to get approval for the shorter bio).
- Consider using a modal pop-up box in replacement to the panel flip with the bio going into the modal box and adding a button or link text to the pop-up.
Q: I have a list of terms and definitions I’d like to add to my site. I’m wondering how best to display these without having viewers gloss over the information.
A: One suggestion would be to break the content up by using the A-Z Links snippet. The content will display alphabetically with shortcuts available at the top of the page.
Wrap up
Thank you to everyone who attended our first Bits & Bytes forum. We appreciate everyone’s contributions and engagement and look forward to seeing how you incorporate Font Awesome Icons into your web projects!
If you have any further questions or suggestions, feel free to reach out to the UIT Web Support & Usability team.
Happy icon-ing!