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

jananiravi · May 9, 2018, 6:18pm

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.

parsiya · May 9, 2018, 6:39pm

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/

jananiravi · May 9, 2018, 6:44pm

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

funkydan2 · May 9, 2018, 7:07pm

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

jananiravi · May 9, 2018, 7:24pm

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.

kaushalmodi · May 9, 2018, 8:52pm

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).

jananiravi · May 9, 2018, 8:58pm

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!

funkydan2 · May 9, 2018, 9:13pm

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.

it-gro · May 9, 2018, 10:13pm

fab fa-goodreads
not
fa-goodreads

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:

jananiravi · May 17, 2018, 10:09pm

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).

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

Any other suggestions? Am i missing somethong here?

TotallyInformation · May 18, 2018, 1:34pm

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.

funkydan2 · May 19, 2018, 2:45am

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.

TotallyInformation · May 19, 2018, 5:31pm

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

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.

davidsneighbour · May 20, 2018, 2:09am

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.

gu-stat · July 17, 2018, 4:26am

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:

to

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:

to

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.

Topic		Replies	Views
How to easily use fontawesome icons with Hugo support	2	6171	July 3, 2020
Hugo theme doesn't render font awsome provided icons	1	847	July 12, 2017
Icon Library support	1	2731	July 12, 2016
Font size messed up and social icons disappear after building website support	3	397	January 20, 2020
Use a custom icon alongside with font awesome support	2	1743	August 29, 2016

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

Related Topics