Cannot get font awesome fonts to appear

support
1

I have my own custom theme and I’m trying to add font awesome free v5 to it.

So I follow the instructions and download the font awesome zip, copy the css dir into assets/fontawesome/css and the webfonts dir into assets/fontawesome/webfonts.

I load the CSS like this, and I can verify that I get no 404’s for this.

{{- with resources.Get "fontawesome/css/fontawesome.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}
{{- with resources.Get "fontawesome/css/brands.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}
{{- with resources.Get "fontawesome/css/solid.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

Looks like this in the generated HTML, and it’s below my own css which is 99% bulma.css. But I also tried putting font awesome above bulma.css.

    <link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="/fontawesome/css/brands.min.css">
    <link rel="stylesheet" href="/fontawesome/css/solid.min.css">

I can also verify that localhost:1313/fontawesome/webfonts exists and I can download the font files.

This url works: view-source:http://localhost:1313/fontawesome/css/brands.min.css
And this one works: view-source:http://localhost:1313/fontawesome/webfonts/fa-brands-400.eot

I don’t want to put fontawesome css into /css because I have my own css there.

I also tried using the CDN all.js version from font-awesome, so I assume the issue is with finding the webfonts files.

I also tried restarting the hugo live server. I can see that hugo server reacts to the webfonts being placed into the assets dir.

And finally I reference the fonts like this.

          <span class="icon-text">
            <span class="icon">
              <i class="fa-solid fa-envelope"></i>
            </span>
            <span>My email</span>
          </span>
2

But if everything works, what is the problem?

3

No as the title says, I cannot get the fonts to appear.

For 4 out of 5 I get a strange glyph, and for one I get nothing.

4

In your browser’s developer tools, check which font is really used.

5

If I click the body element inthe inspector I can only see my system fonts Roboto and Source Code pro. I can’t see the font awesome webfonts anywhere in the console.

6

But the body element is probably not using or referencing a brand. Click where a brand should appear.

Do you see some error messages somewhere about the fonts not being loaded. And perhaps using woff2 instead of eot would be an option, too.

7

If I right click the brand and select Inspect I get no fonts at all.

I was getting an error in the console about main.css.map 404, but no 404 in the network tab. So just to be safe I downloaded the latest bulma.css. I also tried removing bulma.css to see if it made a difference. So that one error is gone now.

The woff2 files are also present, I can download them by going to http://localhost:1313/fontawesome/webfonts/fa-solid-900.woff2. Even tried doing a diff on them to verify it was the same file.

One weird detail that might be relevant. Both localhost:1313/webfonts/fa-solid-900.woff2 and localhost:1313/fontawesome/webfonts/fa-solid-900.woff2 work but I don’t understand why /webfonts works since I only have webfonts in my theme dir under assets/fontawesome/webfonts. I removed them from static and elsewhere.

8

Not enough information. Please post a link to you repository.

9

Keep in mind that hugo does not remove files in public. So deleting public folder to get a fresh start may help with this.

10

A global resource is not published unless you invoke its Publish, Permalink, or RelPermalink method.

structure:

assets/
└── fontawesome/
    ├── css/
    └── webfonts/
layouts/partials/css.html (copied from your initial post) 
{{- with resources.Get "fontawesome/css/fontawesome.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}
{{- with resources.Get "fontawesome/css/brands.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}
{{- with resources.Get "fontawesome/css/solid.min.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

layouts/partials/fonts.html 
{{ range resources.Match "fontawesome/webfonts/**" }}
  {{ .Publish }}
{{ end }}

layouts/_default/baseof.html 
<head>
  ...
  {{ partialCached "css.html" . }}
  {{ partialCached "fonts.html" . }}
  ...
</head>

2 Likes
11

Thanks that’s important insight, so I did what you said that published the fonts as well. But they still don’t show properly.

Here is the code of my theme, it’s a theme I’ve been using but I just wanted to add font awesome, so it’s in a branch of its own.

This is where the fonts are used; layouts/_default/home.html · feature-fontawesome · Stefan Midjich / swehack-hugo-theme · GitLab

And the config for {{ .icon }} looks like this;

    [[params.contact.methods]]
      name = "My first name on this domain"
      url = "mailto:"
      icon = "fa-solid fa-envelope"

    [[params.contact.methods]]
      name = "Signal"
      url = "https://signal.me/"
      icon = "fa-brands fa-signal-messenger"
12

Compare what you have done to this working example:

git clone --single-branch -b hugo-forum-topic-52505 https://github.com/jmooring/hugo-testing hugo-forum-topic-52505
cd hugo-forum-topic-52505
hugo server
13

I appreciate the help. Your example does work in my browser but I can’t figure out what I’m doing differently. When I inspect your icon it even shows the font correctly in webdev console.

I tried moving my webfonts publishing to above the CSS just as in your example.

Just to go through every single thing from start to finish.

I call the fonts like this;

          <span class="icon-text">
            <span class="icon">
              <i class="fa-solid fa-envelope"></i>
            </span>
            <span>My first name on this domain</span>
          </span>

You call yours like this;

  <span class="icon-text">
    <span class="icon">
      <i class="fa-solid fa-envelope"></i>
    </span>
    <span>My email</span>
  </span>

I call the CSS like this;

    <link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="/fontawesome/css/brands.min.css">
    <link rel="stylesheet" href="/fontawesome/css/solid.min.css">

You call yours the same.

    <link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="/fontawesome/css/brands.min.css">
    <link rel="stylesheet" href="/fontawesome/css/solid.min.css">

And to load the font resources I do this in layouts/partials/head.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="{{ .Site.BaseURL }}">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>

{{ partialCached "head/fonts.html" . }}
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}

<link rel="icon" href={{ .Site.Params.favicon | default "/favicon.ico" }} type="image/gif">
{{ with .OutputFormats.Get "rss" -}}
  {{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
{{ end }}

While you do it directly in baseof.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
  {{ partialCached "css.html" . }}
  {{ partialCached "fonts.html" . }}
</head>

But our fonts.html files are identical. Our css.html files are almost identical, I just have two more css files.

I also tried removing these css files to see if it would make a difference but no, I also tried removing the public dir and restarting the hugo server.

14

I just noticed the above. To build the example site I went here:
https://fontawesome.com/download

Which allows me to download v6, not v5.

15

Oh. My. God.

Yes now it works with v6. Only reason I even went for v5 was because the bulma.css documentation says it works with font awesome v5 specifically.

16

In v5 it looks like you had to use the fas class instead of the fa-solid class, etc.

And the signal-messenger icon did not exist in v5.