Inspired by the many blog sites out there that display a series of icons linking to the site author's other sites and social media profiles, I set out to add the same to my site.

I knew there were collections of Open Source icon packs out there. My project at work uses Fontello. Wanting to expand my horizons, I looked around for what else is out there. I looked at Font Awesome, but they don't have an icon for Gitea and I really wanted to include a link to my personal Gitea server. I eventually settled on Fork Awesome, which has most of the free icons from Font Awesome as well as an icon for Gitea.

I wanted to self-host the icons, rather than simply referencing someone else's stylesheet to get the WebFont versions of the icons. Unlikely as it might be, I didn't want to risk not having the icons show up due to an outage at someone else's site.

My first thought, once I had downloaded the latest Fork Awesome pack, was to pull out the handful of SVG icons that I planned to use and link them in my Hugo theme's templates. All modern browsers support SVG files, they are scalable and can be colored via CSS styles. At less than 4K a file, a handful of SVG files would be a couple orders of magnitude smaller than the whole font package.

Several hours later, on the wrong side of midnight, I concluded that I had overlooked some rather important details:

• If one links in an SVG file using <img> tags, the icon cannot be colored using CSS styles. This was a problem for me, as the Fork Awesome icons use a black stroke, and I eventually plan to use a dark theme for my site.
• Embedding the SVG into the HTML using the <svg> tag would let me change the color of the icon using fill. Unfortunately, it isn't easy to get Hugo to embed the contents of a file into a template based on a site parameter. Even if it were, embedding the icons would make it impossible for a viewer's browser to cache the icons. Without caching, the gains I might get from using a few small files go out the window.
• While in theory, there is a way to use <svg><use .../></svg> to reference the icon files as separate, cache-able files, I was not able to figure out how to make it work. I think I would need to modify the SVG files to add in identifiers, and/or use JavaScript. Neither option is appealing.

After sleeping on the problem, I took another look at the WebFont approach. I added the fork-awesome.min.css stylesheet and the whole fonts/ folder to the static/ folder of my template, added a handful of usages to my theme's example site, and did some testing. According to Chrome's Developer Tools, the CSS file download was about 35K, and the related font file was about 85K. While technically two “orders of magnitude” larger than a 4K file, 120K of very cache-able assets is not all that bad.