Want the wonderful goodness of SVG without having the need for our SVG + JS framework at the moment? Have no fear, SVG Sprites are here. We have lovingly prepped all the icon set styles into their own SVG sprites.
- Grab one of the sprite files.
- Place this file with the rest of your static files, like CSS or images, in your project.
- In the
bodyof your document call the individual icon you want to use.
<header> <ul> <li> <a href="https://facebook.com/fontawesome"> <svg> <use xlink:href="fa-brands.svg#facebook"></use> </svg> </a> </li> <li> <a href="https://twitter.com/fontawesome"> <svg> <use xlink:href="fa-brands.svg#twitter"></use> </svg> </a> </li> <li> <a href="https://github.com/FortAwesome/Font-Awesome"> <svg> <use xlink:href="fa-brands.svg#github"></use> </svg> </a> </li> </ul> </header>
Issues with SVG Sprites
SVG sprites have a few tricky points you need to know about.
- If you use a URL in the
xlink:hrefIE will not automatically download the file for you. Check out this project (opens new window) if this is something you need.
- If you use URLs in the
xlink:hrefthey need to be loaded from the same domain. There is cross-origin protection on SVGs loaded this way. Some people just serve it directly from their static assets. You can also use a proxy.