'Include only part of font-awesome

I need font-awesome to have spinner icons.

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.

cssfont-awesome


Solution 1:[1]

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">

Solution 2:[2]

Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheet, 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.

Solution 3:[3]

Yes You can, try this Optimize Font Awesome To Ridiculously Low Size Of 10KB!

Solution 4:[4]

This is an old question. However, there is a workaround.

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

Solution 5:[5]

Very old question, but 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>

Solution 6:[6]

Icomoon lets you use their standalone svgs.

https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Alexander van Oostenrijk
Solution 3 yousef
Solution 4 brasofilo
Solution 5
Solution 6 Qwerty

Related Questions