Search code examples
cssfont-awesome

How to include only part of font-awesome


I want to use the spinner icons from font-awesome, but am not interested in any other FA feature.

I could include the whole font-awesome library. But wouldn't that be an overkill for just one icon? Is there a way to include just one icon or component?

The problem seems to be, that the library is not modularised to different files. For example, if using Scss, all icons are in _icons.scss file, rather than each icon in their own file. If you use pure CSS, then everything is in one file.


Solution

  • You can't. A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.

    There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.

    Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.