20

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.

Improve this question
2
  • 1
    It because FontAwsome is a font eventually, so just like you can't use only the letters Q, n and L of a specific font, you can't use only some of the icons of that font (Perhaps you can somehow, but it's a complete overkill). But it's pretty lightweight and probably won't affect the performances dramatically - Especially if you cache the font using CDN for example Commented Jun 11, 2016 at 19:19
  • But there is a SVG version of fontawesome, so you COULD make your own font with those, only having your "letters". Still i think it's a bigger load to load a full font (and the classes) just to use a couple images Commented Jun 11, 2016 at 20:09

7 Answers 7

Reset to default
9

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is only relevant to font awesome 4 and the ligatures of font awesome 5 which is only one way to use the 5th version.
The problem is not just about the font file. There are lots of classes defined in the fontawesome CSS files. One would want to reduce the CSS file size to improve page speed.
7

Now you can use their JS API, which will load only selected SVG files. This incredibly lowers the bundle size.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icon

and then

import { library, dom } from '@fortawesome/fontawesome-svg-core' import { faCamera } from '@fortawesome/free-solid-svg-icons' library.add(faCamera) dom.watch() 
<i class="fa-solid fa-camera"></i>
Improve this answer

Comments

5

Font awesome v5 supports partial styles, in the getting-started page (https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use), you could include this essential file first:

<link href=/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">

and then, you could include one or some of those:

<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"> <link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet"> <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
Improve this answer

2 Comments

While this is better, I use one or 2 icons from each of these css files. That is still leaving a lot of unused css and data for the client to download. There should be a better way. I wonder if webpack or something can get the job done.
The link in this answer is broken.
3

I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG sprite sheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.

Here are some reasons to pick SVGs over icon fonts (also see here):

  • You're including only the icons that you want, obviously.
  • SVG icons allow you to create multicolored icons.
  • Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
  • Font icons can be hard to position. SVGs are easy.
  • SVG icons can have baked-in titles and descriptions, which is good for accessibility.

To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.

FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.

Improve this answer

Comments

1

I will assume that you are using npm and webpack. (in my case I use Laravel, which includes npm)

Open the folder node_modules/@fortawesome/fontawesome-free/js. Now say you want to use the facebook icon only in the brands.js.

  1. copy brands.js and past it with another name -say 'brands_used.js'- in the same folder
  2. open brands_used.js and comment the var icons = {...}; section, keep it for reference latter
  3. type in a new variable with the icons you want included only, which will be a copy/past from the commented section.
 var icons = { "facebook-f":[...], };
  1. require the newly created files in your js assets folder
  2. compile your assets
Improve this answer

Comments

0

When I need the only Icon I sometimes do it the way described below.

  1. Import icon from FA regular way
  2. Open your web page, find its svg definition and copy it
  3. Create constant with content as <svg.....></svg>. In React you have to correct just stroke-width attribute to strokeWidth:
const uploadButton = <svg ............></svg>
  1. Insert icon into your code
<Input ..../> {uploadButton} ...
  1. Remove FA imports from your code

In principle, your can add several icons this way.

Improve this answer

Comments

0

For anyone who needs this, what I did is to just download the FA's spinner svg file, then animate it.

  1. download the file here: https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/spinner.svg
  2. open the file in an editor (even notepad will do)
  3. paste this code: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="0.5s" additive="sum" repeatCount="indefinite" /> inside the <svg> tag.
  4. final code:

<svg width="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"/><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="0.5s" additive="sum" repeatCount="indefinite" /></svg>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.