| 2BA | My
Icons
In our websystem we choose to use FontAwesome icons. FontAwesome provides a wide range of icons that can be easily integrated into web applications. They are implemented by adding classes to elements, often i or span tags. Here's a basic markup for using Font Awesome icons:
<i class="fal fa-user"></i>
In Font Awesome 5, icons can have different thickness options:
- Light (class="fal fa-{icon}")
- Regular (class="far fa-{icon}")
- Bold (class="fa fa-{icon}")
- Brands (class="fab fa-{icon}")
We typically use the Light version (fal fa-{icon}) as our default choice.
In Font Awesome 5, icons can be resized to different scales to better suit your design needs. Here are the available size options:
- Regular (class="fa-{size}"): This size option maintains the standard size of the icon.
- Large (class="fa-lg"): Increases the size of the icon to be larger than the regular size.
- 2x (class="fa-2x"): Doubles the size of the icon.
- 3x (class="fa-3x"): Triples the size of the icon.
- 4x (class="fa-4x"): Quadruples the size of the icon.
- 5x (class="fa-5x"): Increases the size of the icon five times compared to the regular size.
- 10x (class="fa-10x"): Increases the size of the icon ten times compared to the regular size.
When selecting the appropriate size option for your icons, consider the visual hierarchy and emphasis required for your design. The regular size is often suitable for standard use, while larger sizes can be used for more prominent features or focal points.
Best Practices:
- Use Icons Sparingly: Icons should enhance user experience, but avoid overuse to prevent clutter and confusion.
- Choose Recognizable Icons: Opt for universally understood icons to ensure clear communication and ease of use.
- Consistency is Key: Maintain consistent icon usage throughout the application for a cohesive user experience.
- Consider Accessibility: Ensure icons are accessible to all users, including those who rely on assistive technologies.
- Use Semantic Markup: Incorporate icons using semantic HTML elements to enhance readability and accessibility.
- Test Across Devices: Verify icon display and readability across various devices and screen sizes.
Things to Avoid:
- Avoid Overly Complex Icons: Choose simple, clear icons to prevent visual clutter and maintain clarity.
- Avoid Inconsistent Styling: Maintain a consistent style for icons throughout the application to avoid visual discordance.
- Using Icons Alone: Always accompany icons with descriptive text or tooltips to provide context and clarity.
- Ignoring Accessibility: Ensure icons are accessible to all users by providing appropriate alternative text.
- Avoid Complex Icon Hierarchies: Keep icon hierarchies simple to prevent visual clutter and confusion.
Font Awesome Light