I’ve been a fan of FontAwesome for a long time. I admire their work and appreciate everything they do for fonts, icons and making websites and web apps more user-friendly.
Often, I come across instances where I need to use their icons in my CSS and I am constantly forgetting how to use them in CSS. Below are the steps in case you’re as forgetful as I am. (Don’t forget to include the fonts in your header!)
- Find the font you want on their collection
- Copy the Unicode code (ie, f10d)
- Use the following CSS:
:before { font-family: "FontAwesome"; content: "\f10d"; }
You may need to adjust other properties, such as color and position, but this is the process. And, in case you’re wanting to incorporate them into a design, follow these steps:
- Download the font collection from GitHub
- Find the font you want to use on the FontAwesome Cheatsheet
- Copy the icon character you wish and paste it into your design
- Change the font to FontAwesome and voila!