Web Design & Development

Font Awesome Icon CSS Bullet Lists

Want to add icons to your bulleted lists without having to manually add the icon to each list item?

Just use some CSS!

The CSS in the JSFiddle link below allows you to assign a class or two to the UL’s wrapper element (or any other element wrapping your list), and it will automatically pull in the icon you specified for that CSS class.

Here’s that JSFiddle link: jsfiddle.net/Garconis/8m1Lq57y.

You’ll need to know the HTML entity of the Font Awesome icon you want to use (if using a different one than what’s been shown in the JSFiddle above), which you can get from their cheatsheet: fontawesome.io/cheatsheet

An example of this? fa-arrow-right would become content: '\f061'; in CSS.

Need help?

Tell us about your project!

This field is for validation purposes and should be left unchanged.

Related articles