Using the power of fixed-width styling, we added some utility styling to handle HTML lists with icons used as decorative bullets.
Advertisement Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
- All 16,083 Icons in Font Awesome
- Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
- A Perpetual License to Use Pro
- Services and Tools to Make Easy Work of Using Icons
- Fresh Icons, Features, and Software Updates
- Plus Support From Real Humans
Already have a Pro Plan?
Sign in
We’ll cover the basics of how to replace default bullets with icons in unordered lists and introduce options for customizing CSS properties.
Before You Get Started
Make sure you're:
Use fa-ul
and fa-li
to replace default bullets in unordered lists.
You can also keep the semantics of an ordered list behind the scenes but use icon bullets visually.
List Classes
Class | Details |
fa-ul | Used on a <ul> or <ol> elements to style icons as list bullets |
fa-li | Used on individual <li> elements to style icons as list bullets |
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
- All 16,083 Icons in Font Awesome
- Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
- A Perpetual License to Use Pro
- Services and Tools to Make Easy Work of Using Icons
- Fresh Icons, Features, and Software Updates
- Plus Support From Real Humans
Already have a Pro Plan?
Sign in
Customization
We've added CSS custom properties (opens new window) to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.