Folder and Tag Fontawesome Icons Direct CSS

[Jieiku]

This will load the folder and tag Fontawesome SVG icons directly from CSS. This results in a slightly smaller site, and also 1 less request on initial page load.

In addition it is No Script Friendly :) The way that Fontawesome normally loads, I get broken icons on sites because NoScript blocks it. Loading the icons this way causes no issue with No Script.

There is also the ability to add a stroke color to the outside of the SVG icon, although in this example the color is set to none for the stroke.

I think I have thoroughly cleaned up this pull request, let me know if you see any issues.

[alanorth]

@xekon the CSS function is clever (is it from Font Awesome?) and technically cool, but seems slightly obscure to me. It's not obvious to me or how to add or update icons, so this optimization is not appealing to me as a maintainer. Currently I stay as close to the upstream Font Awesome SCSS as possible, as you can see in source/scss/fontawesome.scss:

...
//@import 'icons';

// selectively import icons we need from fontawesome
// see: node_modules/@fortawesome/fontawesome-free/scss/_icons.scss
.#{$fa-css-prefix}-tag:before { content: fa-content($fa-var-tag); }
.#{$fa-css-prefix}-folder:before { content: fa-content($fa-var-folder); }

Notice I'm not even loading the entire Font Awesome. We literally only include the parts we need. The source is very simple to maintain and anyone can see what it's doing.

Also, I am impressed that you manage to use NoScript, but that's a personal decision of yours. This theme is already very small and fast by default because there is only one CSS file and no JavaScript, cookies, or third-party requests unless you decide to turn on Disqus, Cookie Consent, or Google Analytics (I do not use any of these on my site).

[alanorth]

Regarding the trailing slash in category and tag links you're right, it works on my site (also nginx), but results in a re-direct that I hadn't noticed:

$ http --print Hh https://picturingjordan.com/categories/architecture
GET /categories/architecture HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: picturingjordan.com
User-Agent: HTTPie/2.0.0

HTTP/1.1 301 Moved Permanently
Connection: keep-alive
Content-Length: 162
Content-Type: text/html
Date: Mon, 27 Jan 2020 07:52:51 GMT
Location: https://picturingjordan.com/categories/architecture/
Server: nginx
Strict-Transport-Security: max-age=15768000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

I checked a few other themes and notice they do the same thing. Is there a better way to do this than just adding "/" to the end of the URL? Shouldn't Hugo's URL functions like absURL and urlize (and others) handle this? I will look into that.

[alanorth]

Update to the link issue, I notice that this very theme's demo page hosted by Hugo Themes does not perform a redirect on URLs that are missing a trailing slash (for example a tags link):

$ http --print Hh https://themes.gohugo.io//theme/hugo-theme-bootstrap4-blog/categories/themes
GET //theme/hugo-theme-bootstrap4-blog/categories/themes HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: themes.gohugo.io
User-Agent: HTTPie/2.0.0

HTTP/1.1 200 OK
...

So I am assuming—for better or worse—this is a server configuration issue.

[Jieiku]

Very good to know and thanks for the feedback. When you download fontawesome they actually provide the raw solid SVG files now, you can just open them in notepad or whatever text editor you like.

you then paste the content of that file into an SVG ASCII encoder: https://codepen.io/yoksel/pen/JDqvs

here is a really good read that helped me sort out the hard parts: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

[alanorth]

Let me think about it. SVG is awesome, and I see that loading each of the Font Awesome webfonts adds 70KiB each, so it's definitely something worth while if I can find a clean and straightforward way to do the SVG versions.

[Jieiku]

cool, I know maintainability is important too! For me I am only using the Folder and Tag icon, so this was a do it once and forget about it task for me. If you can find a way that streamlines the SVG ASCII encoding that would be really neat!

[Jieiku]

Also I have to wonder if the trailing slash missing is a bug in Hugo.

Will see if there is anything I can do in my nginx config to make it work regardless of a missing trailing slash and without redirecting me.

[alanorth]

@xekon I implemented a more "canonical" version of Font Awesome SVG icons using their official JavaScript loader (see 3ab60bddeaa6a4d8a7b0a31ee9431dfd84a7b335). I know this will trigger your NoScript (just like the web fonts did), but in my tests I save 134KiB in transferred bytes, as now we are ONLY loading the five icons we are actually using (plus 40KiB for the JavaScript, ugh).

Let me know what you think.

[Jieiku]

well, it works. Another option, that I think might be better for your case, is to simply repackage only the icons you wish to use into a new .woff file (it would be a very small file then), then you would not need the javascript. You could preload the new .woff file with a rel link in the head, then it would be cached. (this is what my wife's wordpress site does for social icons.)

For my own site I will probably stick with the direct loading from CSS, but I can see how that is less maintainable.

[Jieiku]

I think the missing trailing slash IS a BUG in HUGO. Take a look at your sitemap:

view-source:https://picturingjordan.com/en/sitemap.xml

the links are correct with trailing slash there. The category and tag links should match the links provided by the sitemap.xml file

Going to go open a bug report with HUGO now.

[alanorth]

Another option, that I think might be better for your case, is to simply repackage only the icons you wish to use into a new .woff file (it would be a very small file then), then you would not need the javascript

Yes that will work, but don't want to manually optimize the site with clever hacks to make it insanely small and fast. The idea is that the process to build the site is clear, repeatable, and automate-able for as many people as possible. Generating custom web fonts dramatically increases the level of difficulty. Right now the site can build anywhere that Node.js runs.

[alanorth]

I think the missing trailing slash IS a BUG in HUGO. Take a look at your sitemap:

view-source:https://picturingjordan.com/en/sitemap.xml

the links are correct with trailing slash there. The category and tag links should match the links provided by the sitemap.xml file

Going to go open a bug report with HUGO now.

OK I'm still not sure it's a Hugo bug. I haven't had time to investigate properly. Keep me posted, though. Perhaps open up a new issue here so we don't confuse this thread about Font Awesome.

[fte378]

@xekon I hardcoded this now in the partial showing the article header without changing the stylesheet. Because I overwrite baseof.html anyway I could also remove the JavaScript for FontAwesome.

Thanks for triggering me regarding this!