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.
Basic Use
- 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
body
of 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:href
IE 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:href
they 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.