Problem using awesomefonts using assets folder in hugo

support
1

Hi hugo team,

I’m using the latest version of HUGO 0.60.1
I’m trying to create a Bulma + fontAwesome theming for hugo.

Bulma works well !, but using the same configuration, icons of fontawesome are not displayed correctly. I have a blank square with number.

My assets folder contains :

/assets/sass
/assets/sass/@fortawesome
/assets/sass/bulma
/assets/sass/_main.scss

My _main.scss contain :

@import "bulma/bulma";
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import "@fortawesome/fontawesome-free/scss/solid";

My layout head.html contain :

{{ $styles := resources.Get "sass/_main.scss" | toCSS  }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

I call icon like that :

<span class="icon"><i class="fas fa-angle-right"></i></span>

When i render with huger server :

Screenshot_2019-12-06 My New Hugo Site

Any idea ?

2

I’m guessing you’ve made a small typo with the filename in your assets folder—that it’s _main.scss (which your code calls) not _main.css?

Is it possible for you to share your full site code - maybe a git repo?

3

Hi,
Yes it was a typo sorry.
Here the site : https://github.com/reyman/hugo-site

/assets exist in the theme “bulma-hugo-book” folder

4

you can create a free FA kit and get the font from the clod / cdn

https://fontawesome.com/start

5

Yes, when i do that with the Kit it’s work, but that don’t solve the problem with sass asseset :slight_smile:
I’m trying to understand why that doesn’t work !

6

I’m don’t know why this doesn’t happen, but you need the font awesome webfont files to either end up in your /resources folder or in /static.

My guess is that Hugo doesn’t know to process the relevant font files and place them in the /resources directory. I wonder if the easy fix would be to move your @fontawesome directory into /static and use it from there.