Font Awesome Icon CSS Bullet Lists

November 22, 2016

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.

Jon Fuller https://freshysites.com/team/#Jon-Fuller

Jon is from the Binghamton, NY area and graduated from the School of Art and Design at Alfred University with a Bachelor of Fine Arts. Concentrated studies were in Graphic Design and Video. Jon has an appreciation of all aspects of art and design, and has an extensive background in both print media and web — with a thorough understanding of video and photography. Jon comes to FreshySites with 9 years of graphic design and web experience. He continues to make a habit of researching new tools and technologies to broaden his knowledge in the web development industry. He’s a tech junkie who has a passion for implementing new techniques and improving his surroundings. Outside of work, Jon also enjoys going on new adventures with his wife, exercising, and sipping on quality craft beer.