Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font Awesome, handshake but no handshake-slash #428

Closed
hartzell opened this issue Jan 24, 2021 · 8 comments
Closed

Font Awesome, handshake but no handshake-slash #428

hartzell opened this issue Jan 24, 2021 · 8 comments

Comments

@hartzell
Copy link

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.

  1. I cloned the site:

    git clone --recurse-submodules --depth 1 https://github.com/google/docsy.git docsy

  2. 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 >}}

  3. 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!
@hartzell
Copy link
Author

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.

Screen Shot 2021-01-24 at 9 31 33 AM

@LisaFC
Copy link
Collaborator

LisaFC commented Jan 28, 2021

That is weird. Let me take a look.

@LisaFC
Copy link
Collaborator

LisaFC commented Mar 2, 2021 •
edited

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

@LisaFC
Copy link
Collaborator

LisaFC commented Mar 2, 2021

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

@hartzell
Copy link
Author

hartzell commented Mar 2, 2021

I think that some (most? all?) of the icons from this list: FortAwesome/Font-Awesome#16804 (comment) have trouble (in spite of the fact that they seem to be at the newer, correct code-point (see #428 (comment)).

I have a feeling there's a massive 'Doh!' moment awaiting whomever figures this out, but I don't see it....

Thanks for looking !

@LisaFC
Copy link
Collaborator

LisaFC commented Mar 2, 2021

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.

@crimsonvspurple
Copy link

any update on this?

What is the recommended way to use font-awesome pro with docsy?

@emckean
Copy link
Collaborator

emckean commented Aug 4, 2023

Screenshot 2023-08-04 at 3 49 55 PM
I got this icon to load on the most recent version, so closing this issue

@emckean emckean closed this as completed Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@emckean @hartzell @LisaFC @crimsonvspurple