We’ll cover the basic of adding icons as SVG sprites, and cover the sticking points of using SVG sprites to help you ensure your projects are a good fit for their use.
Select the Sprite Files
Inside the Font Awesome Download or package, you'll find the files you need. In Font Awesome Pro, there are three families of icons: Classic, Sharp, and Brands. There are five styles of Classic icons, with more Sharp styles coming soon. The Free version includes a selection of icons in Solid and Regular, as well as all Brand icons.
|Style ||Availability ||Sprite file ||Looks like|
|Brands ||Free || |
To add icons from a sprite file, follow these steps:
- Grab the sprite file for the style or styles you want to use.
- Place this file with the rest of your static files, like CSS or images, in your project.
- In the
body of your document, call the individual icon by name in the sprite file for the style you want to use. Make sure the path correctly points to where you placed the sprite files, and they are hosted on the same server!
Here's some examples of how you can call icons in a variety of styles:
Issues with SVG sprites
SVG sprites have a few tricky points you need to know about. Make sure your project is a good fit for using this technique with the following in mind.