omacranger / fontawesome-subset

Creates subsets of FontAwesome fonts for optimized use on the web.
GNU General Public License v3.0
66 stars 15 forks source link

Free: mixing `fab` and `fas`? #7

Closed av01d closed 3 years ago

av01d commented 3 years ago

Using Font Awesome 5 Free: how do I generate a set of the following icons: fas fa-at, fab fa-twitter, far fa-circle These are all part of Free, but use different prefixes (fas, fab, far). This does not seem to work:

const fontawesomeSubset = require('fontawesome-subset');
fontawesomeSubset({
      regular: ['circle'],
      solid: ['at'],
      brand: ['twitter']
   },
   'output',
   {
      package: 'free'
   }
);

How can I accomplish this?

omacranger commented 3 years ago

@av01d I don't see a circled icon on the fontawesome website (perhaps that's meant to be circle?), but for the others it would be something like below like you had it.

fontawesomeSubset(
      {
          regular: ['circle'],
          solid: ['at'],
          brand: ['twitter']
      },
      'sass/webfonts'
);

The below example would output three sets of font files that, when loaded in the page, could be used like so:

<i class="far fa-circle"></i>
<i class="fas fa-at"></i>
<i class="fab fa-twitter"></i>
av01d commented 3 years ago

Ok, thanks for your feedback. Got it working for regular and solid, but not for brand. Here's my test script:

const fontawesomeSubset = require('fontawesome-subset');
fontawesomeSubset({
      regular: ['circle','square'],
      solid: ['at','square'],
      brand: ['twitter','facebook-f','linkedin-in','pinterest','whatsapp']
   },
   'output',
   {
      package: 'free'
   }
);

After running this, the output directory contains the following files:

fa-regular-400.eot
fa-regular-400.svg
fa-regular-400.ttf
fa-regular-400.woff
fa-regular-400.woff2
fa-solid-900.eot
fa-solid-900.svg
fa-solid-900.ttf
fa-solid-900.woff
fa-solid-900.woff2

Brand icons are just not there...

av01d commented 3 years ago

I got it. It's brands, not brand :-) This works:

const fontawesomeSubset = require('fontawesome-subset');
fontawesomeSubset({
      regular: ['circle','square'],
      solid: ['at','square'],
      brands: ['twitter','facebook-f','linkedin-in','pinterest','whatsapp']
   },
   'output',
   {
      package: 'free'
   }
);
omacranger commented 3 years ago

Good catch! It does appear that it will not warn for incorrect subset types when supplied (though typescript should). I'll make note for the future if any updates are pushed to add some npm warnings for invalid subsets to hopefully make tracking that down a little easier.