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.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles