docsy
docsy copied to clipboard
google
Font Awesome, handshake but no handshake-slash
I'm trying to use the fa-handshake-slash icon, https://fontawesome.com/icons/handshake-slash?style=solid, in a site but I can't get it to show up. It was updated in FA 5.14.0 and the solid version is not a PRO icon (although regular, light, and duotone are). I don't see any related issues on the Font-Awesome site (this one mentions handshake-slash, but is desktop).
I just replicated the problem in the current docsy userguide.
-
I cloned the site:
git clone --recurse-submodules --depth 1 https://github.com/google/docsy.git docsy -
Added icons for both the handshake and the handshake-slash into an obvious place in the front page:
diff --git a/userguide/content/en/_index.html b/userguide/content/en/_index.html index a1d390f..24e140d 100644 --- a/userguide/content/en/_index.html +++ b/userguide/content/en/_index.html @@ -12,7 +12,7 @@ linkTitle = "Docsy" <a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/google/docsy"> Download <i class="fab fa-github ml-2 "></i> </a> - <p class="lead mt-5">A Hugo theme for creating great technical documentation sites</p> + <p class="lead mt-5">A <i class="fas fa-handshake"></i> Hugo <i class="fas fa-handshake-slash"></i> theme for creating great technical documentation sites</p> {{< blocks/link-down color="info" >}} </div> {{< /blocks/cover >}} -
Changed my working directory into the userguide and previewed the site:
cd userguide hugo server --themesDir ../..
I see the handshake but there's just an empty square for the handshake-slash.
The Font-Awesome submodule is at a commit that is beyond the 5.14.0 Font-Awesome release that most recently updated the handshake-slash.
➜ docsy git:(master) ✗ git submodule status --recursive
951a0d011f8c832991750c16136f8e260efa60b5 assets/vendor/Font-Awesome (5.14.0-3-g951a0d01)
a716fb03f965dc0846df479e14388b1b4b93d7ce assets/vendor/bootstrap (v2.3.1-15335-ga716fb03f)
➜ docsy git:(master) ✗
This HTML file, using a copy of font-awesome that I just downloaded, does display both icons. It also works if I refer to the copy of all.css within my personal project (which is at 951a0d0...).
<head>
<link href="css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fas fa-handshake"></i> <!-- uses solid style -->
<i class="fas fa-handshake-slash"></i> <!-- uses solid style -->
</body>
I'm at a loss. Any clues or helpful suggestions?
Thanks!
ps. I see the same behavior using Chrome and Safari, I'm working on a Mac running 10.15.7.
pps, if I drill into the page in the dev tools, I can see that handshake-slash is using the newer/current unicode code point (\e060), so it does not appear to be hung up on the Font Awesome issue linked above.
Sorry, just getting round to this too and I'm still mystified - I think we're at a version that should have that icon. It's not showing up for me either. Let me investigate further....
So I just updated a test repo to literally the most recent possible version of Font-Awesome, getting it from today's version of the repo, and it's STILL not displaying the handshake-slash. Going to try some other icons to see if it's just that one that apparently hates us...
I think that some (most? all?) of the icons from this list: https://github.com/FortAwesome/Font-Awesome/issues/16804#issuecomment-658856773 have trouble (in spite of the fact that they seem to be at the newer, correct code-point (see https://github.com/google/docsy/issues/428#issuecomment-766399872).
I have a feeling there's a massive 'Doh!' moment awaiting whomever figures this out, but I don't see it....
Thanks for looking !
Yes, I just tried adding fa-caravan and got ... an apple.
It seems to be something to do with the font-family, I tried switching off "font-family: 'font awesome 5 free';" in Chrome developer tools and all my other icons disappeared (apart from the ones that are brand icons which are in a different font family) and the errant apple.
any update on this?
What is the recommended way to use font-awesome pro with docsy?
