Blank squares for icons

[desirajusantosh]

I thought to open an issue here: hugo server and hugo -D leading to icons showing up as blank squares - as seen in screenshot.
Has anybody else faced this issue?

[victoriadrake]

Hello @desirajusantosh! The CSS will render differently if you're using the server; here's the code in question: https://github.com/victoriadrake/hugo-theme-introduction/blob/master/layouts/partials/head/css.html

If you'd like to share the HTML being rendered in your screenshot there (inspect element on one of those icons will do) I may be able to help further.

[desirajusantosh]

Thanks for quick response! This is what I see when I inspect: I earlier had "fab fab fa-twitter" but I changed that to "fab fa-twitter".

Here's a quick link to what I have so far: https://github.com/desirajusantosh/santoshdesiraju.github.io/ Please suggest if I'm off somewhere.

[victoriadrake]

This may be related to #203. It’s necessary to set your .icon_pack in the site config.

I don’t see a config.toml in your repository; do you have that set up?

Just realized that was the rendered site. #203 may be incorrect... I can look into this more in the next week.

[desirajusantosh]

Thank you. Yes, I previously pointed you to the rendered site. But, here is the complete repo: I have the config.toml here - https://github.com/desirajusantosh/santosh/blob/master/config.toml

[victoriadrake]

Thank you for the link! I wasn't able to reproduce this issue with an identical config:

    [[params.social]]
        url   = "https://twitter.com/"
        icon  = "twitter" # icon name without the 'fa-'
        icon_pack = "fab"

The HTML I see rendered when using Hugo server is <i class="fab fab fa-twitter"></i>.

Would you ensure you're using the most current version of the theme, then let me know if this still occurs?

[desirajusantosh]

Thanks. I've retried with latest version of the theme. Its all fine until I build using hugo -D and then subsequently use github pages. That's when its failing to show icons:
Here is the latest attempt: https://github.com/desirajusantosh/me
which is showing <i class="fab fab fa-twitter"></i>

[victoriadrake]

I noticed you're using a few different repositories -- you may need to ensure that your baseURL in config.toml is correctly set.

[desirajusantosh]

Yes, config.tml has the correct baseURL. The github pages shows up but its without icons, that is all - like this: https://desirajusantosh.github.io/me/
Github pages is building from docs folder and the docs folder has been built using: HUGO_THEME=introduction hugo --gc --minify --themesDir ./themes/ -v -d ./docs

[victoriadrake]

I did notice on your site that the font is trying to load from your URL, but without the /me/ part of the path:

However, I'm still unable to reproduce this behavior.

[github-actions]

It looks like this has been idle a while, so I am marking it as stale. Remove the label or comment if this issue should remain open.

[xavierzinn]

Hello everyone, I downloaded the theme and I am also experiencing the issue where I get the blank squares for icons. Locally it works fine, only when I upload it to my static site in AWS I get this issue. This is what I've noticed. in the css in docs/css/main.min.xxxxxxxxx.css the font paths are src:url(../fonts/fontawesome-free/webfonts//fa-brands-400.woff2)

yet, when I run the hugo command and generate the static files, I look in the public/css directory at take a look at the main.min.xxxx.css file the webfont path is src:url(../fonts/fontawesome-free/webfonts//fa-brands-400.woff2) - note the // which i believe is the issue.

i can launch the site in AWS hit F12 and then manually change the path to remove the double // and they appear, however, when i actually change the css file and re-uploaded it breaks the prettiness of the theme.

[mansoorbarri]

I think its because of the integrity tag for the css and js. I have developed multiple themes and use one for my own website as well and I have the same issue where the css won't load sometimes; removed the integrity tag and it works fine. Fix linked here: https://mansoorbarri.com/css-integrity-error-hugo/