Goodreads icon (fa icon pack) does not show up when called within Hugo/Blogdown (Hugo-academic theme)

I’m creating a webpage using Hugo Blogdown (using the Hugo-academic theme).
I’m having some trouble with customizations within the config.toml page. For instance, the GitHub and other social network icons work (in the config.toml page) but not Goodreads:

[[params.social]]
    icon = "goodreads"
    icon_pack = "fa"
    link = "//goodreads.com/jananiravi"

An almost identical bit that works:

[[params.social]]
    icon = "github"
    icon_pack = "fa"
    link = "//github.com/jananiravi"

I guess font awesome has to be updated? Any suggestions on how this can be fixed? thanks!

Posted originally on GoHugo GitHub.

I could not find out the version of FontAwesome used by the theme. But version 4 does not have a goodreads icon. Search here: https://fontawesome.com/v4.7.0/icons/. I think you are using 4 because version 5 has put all brand icons inside the fab icon pack.

You could use another icon if needed, like the book: https://fontawesome.com/v4.7.0/icon/book/

Yes, Font Awesome needs to be updated from 4.5 to 5.0.12. That should hopefully fix the missing icons.

Ok - this is just to point you in the right direction. I haven’t tested it, so it may not work!

In the hugo-academic theme the version of fontawesome is set in the file sri.toml (which is really neat, I hadn’t seen that done previously).

To override these settings, you’ll need to copy sri.toml into your sites /data directory (so yoursite/data/sri.toml) and change the lines relating to fontawesome. You can get the version number and sri from https://fontawesome.com/get-started/svg-with-js

OK, so open the sri.toml page from MySite>themes>hugo-academic>data and replace lines 46–48:

[css.fontAwesome]
version = “4.7.0”
sri = “sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==”

with

[css.fontAwesome]
version = “5.0.12”
sri = “sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR”

Should I be appending this line with the +/Sw== bit at the end as well (I have for now)? What does that mean? Thank you so much for your help.

No! The SRI (Subresource Integrity) hash must be copied character-to-character, nothing added or removed…

The SRI hash can vary for a given resource (the .js or .css file that you are downloading) based on the number of bits in the hash (older was 512-bits, and thus the sha512- prefix; newer one is 384-bits, and so is a bit shorter).

OK, sounds good! Unfortunately, I am not yet able to test if this fix works due to other issues with Hugo-academic rendering (discussed yesterday). I am hoping that it does, though. Thanks @funkydan2 and @kaushalmodi!

Well you could do that, but it’s better practice to duplicate the siri.toml file found in the theme directory and put a copy in MySite>data (that directory may not exist in your hugo install—just mkdir data and put the file in it). The reason this is better practice is if you update the theme you won’t lose your customisation. Hugo is built to look for your version of files (data/partials/css/archetypes/etc.) first and then the theme’s version.

And also, be careful, there are some changes in the way fontawesome works between verse 4 and 5. You may find there are quite a few little changes you’ll need to make for icons to show up.

https://fontawesome.com/icons/goodreads?style=brands
fab fa-goodreads
not
fa-goodreads

https://fontawesome.com/how-to-use/upgrading-from-4

First, remember that for each icon you need to specify
the name and the proper prefix. Version 4 just had one
prefix — fa. Version 5 has four prefixes:

Thanks @funkydan2 and @kaushalmodi
I created a copy of sri.toml in /data/ and updated the sri to the latest font awesome version from here.

[css.fontAwesome]
version = “5.0.13”
sri = “sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe”

Thanks for the fa links, @it-gro
goodreads or fa-goodreads | fa or fas — neither work
The original ones (with the previous version) were icon_pack="fa" and icon="github" or twitter or goodreads

None of these modifications (w/ a few other permutations and combinations) have worked thus far. Of the entire lot, only the ai icons are currently showing up & none of the font-awesome ones (blank spaces).
image

FYI: changing it back to 4.7.0 works for all icons except Goodreads (worst-case scenario)
image

Any other suggestions? Am i missing somethong here?

I think that what you are missing is that FA v5 works very differently to previous versions. You will need to make changes to the theme’s core code to get FA v5 working.

While I’m currently using FA v5 in my own theme, I want to get rid of it since it requires JavaScript on the front-end and I am trying to eliminate all that.

FA5 doesn’t need javascript, you can still use it as a webfont with CSS. I’ve just changed my theme from js to css, as the HTML5UP theme I based it on used pseudo elements for the hamburger menu.

Ah, I knew when I wrote that that someone would correct me. I should have added that I am trying to limit or eliminate webfonts too as they can come with their own issues. As it happens, I have 1 icon that I had to make using FA JS because it is a combination of a square and some text for about.me. But, having thought about it so more and as a result of trying to get rid of a number of dubious website memberships, I will be deleting that anyway. I have to give praise to Facebook for prompting me to go out and greatly simplify my online life :exploding_head:

I also discovered a site with a bunch of SVG icons so I’ll probably switch to those as I’ve already done for my share icons.

Did you try to call “fa fab fa-goodreads”? put the fab into icon_pack. also as an upgrade from 4 to 5 the icon packs have different names now, far, fas, fab and so on. All “brand” icons have fab.

The goodreads icon does exist since version 5, so “fallback” is not possible.

You won’t be able to replace

[css.fontAwesome]
version = “4.7.0”
sri = “sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==”

with

[css.fontAwesome]
version = “5.0.13”
sri = “sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe”

or its newest version

[css.fontAwesome]
version = “5.1.0”
sri = “sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt”

with the current version of hugo-academic theme (v2.3.0). If you build your site with

[css.fontAwesome]
    version = “4.7.0”
    sri = “sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==”

and check the page source, you see that hugo-academic theme (v2.3.0) gets its font-awesome icons from
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

If you build your site with

[css.fontAwesome]
version = “5.1.0”
sri = “sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt”

and check the page source, you’ll see the following
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/font-awesome.min.css

But, if you check


you see that the latest version is 4.7.0. So your site cannot get the icons for version 5.1.0 from this address because it doesn’t exist.

One one of fixing it is going to themes/hugo-academic/layouts/partials/header.html and changing the following lines:

{{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/css/font-awesome.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.fontAwesome.version $sri.css.fontAwesome.sri | safeHTML }}

to
{{ printf "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v%s/css/all.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.fontAwesome.version $sri.css.fontAwesome.sri | safeHTML }}

And this

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/{{- $sri.css.fontAwesome.version -}}/css/font-awesome.min.css">

to
<link rel="stylesheet" href="//use.fontawesome.com/releases/v{{- $sri.css.fontAwesome.version -}}/css/all.css">

UPDATE:

I’ve just noticed that they changed the classes of some (maybe all?) of the icons from v4.7.0 to v5.1.0. For instance, the envelope icon changed from:

<i class="fa fa-envelope"></i>

to

<i class="fas fa-envelope"></i>

So you need to make other changes to the theme’s configuration. Making these changes might not be optimal, specially if we take into account that you’ll have to make all these changes again whenever the theme updates (unless they add them to it in future versions), but here’s how you do it:

Go to file layouts/partials/widgets/about.html and change the following line:

<i class="{{ $pack }} {{ $pack }}-{{ .icon }} big-icon"></i>

to

<i class="{{ $pack }} {{ .icon }} big-icon"></i>

And then you’ll need the following changes in the config.toml file:

From:

[[params.social]]
    icon = "envelope"
    icon_pack = "fa"
    link = "mailto:test@example.org"

  [[params.social]]
    icon = "twitter"
    icon_pack = "fa"
    link = "//twitter.com/GeorgeCushen"

  [[params.social]]
    icon = "google-scholar"
    icon_pack = "ai"
    link = "https://scholar.google.co.uk/citations?user=sIwtMXoAAAAJ"

  [[params.social]]
    icon = "github"
    icon_pack = "fa"
    link = "//github.com/gcushen"

to:

[[params.social]]
    icon = "fa-envelope"
    icon_pack = "fas"
    link = "mailto:test@example.org"

  [[params.social]]
    icon = "fa-twitter"
    icon_pack = "fab"
    link = "//twitter.com/GeorgeCushen"

  [[params.social]]
    icon = "ai-google-scholar"
    icon_pack = "ai"
    link = "https://scholar.google.co.uk/citations?user=sIwtMXoAAAAJ"

  [[params.social]]
    icon = "fa-github"
    icon_pack = "fab"
    link = "//github.com/gcushen"

And to add the goodreads icon, use

[[params.social]]
    icon = "fa-goodreads"
    icon_pack = "fab"
    link = "//goodreads.com/USERNAME"

Like I said before, making all these custom changes might not be optimal, but it works for now.