Use only parts

[MoritzFago]

I want to use fork awesome, which is awesome for some link icons on my personal block. To save bandwith, i'd like to include only the icons I need. Is there any supported way to do so? EDIT: @tessus I'd like to host the files myself, because i don't want to give the data of my users to some cdn.

[xuv]

At this moment, not straight out of the box. Although I must admit it's something I'd like us to provide. But we are not there yet. If you would want to work with us to achieve this, that would be awesome.

So for now, there is different ways you could do this:

1. Either you install the complete build tool chain we use and then selectively, remove from the build pipeline the icons you don't want by editing the files in src/icons folder: namely .fontcustom-manifest.json and icons.yml. That way, it still stays compatible with Font Awesome and Fork Awesome.
2. Or you import the individual SVG icons or font files in an online icon font creator such as Icomoon (or Fontello #5) and generate your own custom font.

[tessus]

@MoritzFago If you want to save bandwidth the best option would be to use ForkAwesome via a CDN.

@xuv you need the toolchain to build a custom font. however, maybe there's a way to install a server side web app which builds a custom font. e.g. people could check a number of icons (or upload a list of icon names) and click on submit. after a bit they can download the custom font. Doing this on a private server is not very complicated, but how could we do this on the github web page?

[xuv]

@tessus Yes, a private server that offers the service is a way to do it. A client side font building process would make this static server friendly (needs more analysis. Not sure this is even possible). Or we simplify the clone-build-locally process to allow this.

[MightyPork]

If anyone's interested, I've built a Fork Awesome customizer that lets one generate a version with a subset of icons (and also change the font name, prefix, etc.)

https://git.ondrovo.com/MightyPork/fork-awesome-customizer

read the readme :)

edit: sorry, fixed the link. it's ok now

[xuv]

@MightyPork This is great. Do you think it's possible to distribute this with Fork Awesome itself instead of a different repository. If this does not break the "full" font building system, I would be very happy if you could merge this into our master. What do you think?

[MightyPork]

@xuv That is possible, but it should probably be done by you or someone else who understand how the font builder work. My solution is the result of a good deal of trial and error, and while it works, it might not be the best way to do it.

Here's what's happening:

1. The install script cleans the FA submodule and resets it to upstream master. It then copies the icons.yml, fontcustom.yml, and .fontcustom-manifest.json into a back-up directory (the latter because it is easier to parse with node).
2. All icons from the svg folder are copied to this backup folder as well, as I had problems making fontcustom (or the rest of the build system) to ignore icons that were in that folder. The svg folder is emptied.
3. Config files specifying which icons to use etc. are generated for the user to edit.
4. When building, I delete the manifest file, replace fontcustom.yml and icons.yml, including only the desired icons, and copy their svg into the svg folder. Then make is run, but it fails because woff is not built. That's okay for me, the font was built already. I then take the result and copy it into a output/ folder for the user to use.

[MightyPork]

So I've done some more cleaning and testing, and the customizer is now much easier to modify/adjust/potentially integrate, and also supports icon aliases properly. Next thing to add is probably custom icon names, but at that point we might as well run a custom fontello instance.

Note that the CSS produced by the patcher is not 100% FA compatible, i.e. missing stuff like fa-spin. I didn't find a good way to make the official build process to build a custom CSS; but what I got should be enough for most use cases

Honestly I feel like the repository is ripe for a major make-over. I can script the build process in node (and bash), but I know nothing about ruby, jekyll and the other stuff that's included.

[xuv]

Sorry for the delay in response to this thread.

Totally agree with you that the FA repo should have a complete make-over. I don't commit to it for the moment. And I still hope to do things in a more gradual manner. But at the moment, people want icons more than a build process... ;) I'd say it's actually a mess between Jekyll, custom plugins in ruby and some node-bash scripting on top of it.

We could definitely drop bash for some node script. And some of those Jekyll plugins can probably be replaced by some vanilla Jekyll functions.

I really like your approach though and the simplification you provide. I think, for now, I will reference your repo in the documentation. Until, we find some time to tackle the bigger picture.

[llllvvuu]

Just wanted to share the hack I use for limited functionality (since the forkawesome repo and above customizer repo are hard to compile on M1 Mac Ventura):

npm i -g glyphhanger
pip install fonttools brotli zopfli
glyphhanger index.raw.html | awk -v FS=, '{for(i=1;i<=NF;i++)if($i~/F/){printf sep $i;sep=","}}' > glyphhanger_output
pyftsubset assets/fonts/forkawesome-webfont.woff2 --unicodes-file=glyphhanger_output --flavor=woff2 --output-file=icons.woff2
pyftsubset assets/fonts/forkawesome-webfont.woff --unicodes-file=glyphhanger_output --flavor=woff --output-file=icons.woff --with-zopfli

for the CSS you can use a typical CSS minifier to prune dead code, but for me without a build pipeline that was a hassle, so I just manually inlined like

<style>
@font-face {
  font-family: 'ForkAwesome';
  src:  url('./icons.woff2') format('woff2'),
        url('./icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 ForkAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

and instead of using the fa-* classnames, I just do like <i class="fa" aria-hidden="true">&#61595;</i> for GitHub. The hex codes are in the release fork-awesome.css by searching e.g. fa-github.

Of course, this isn't a prod-ready solution, but maybe it helps people who are just using for a personal site and don't want to go through the whole build process.