Icons don't show in Demo and on example page

[GITchristoph]

Hello Victoria

Thanks for the nice theme.
I would like to use it to start working with Hugo.

There seems to be one issue with the demo and the example page, which is that the favicons don't show up.
When you open the demo page, then you will see directly that the favicons for twitter, linkedin etc. right below "I'm a theme for Hugo"don't show up.
https://themes.gohugo.io/theme/hugo-theme-introduction/

Can you tell me what you think causes this so I can fix it in my example page?

Maybe you also want to fix it in the demo page?

Hope this all makes sense and thanks a lot in advance for your help,

Greetings, Chris

[GITchristoph]

Hi - I just received some support on the hugo-foums.

When opening the Demo file in Chrome, the error message in the developer console is this:

themes.gohugo.io/:1 Mixed Content: The page at 'https://themes.gohugo.io/theme/hugo-theme-introduction/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/NunitoSans/NunitoSans-Regular.ttf'. This request has been blocked; the content must be served over HTTPS.

I have the same on my page as well:

Mixed Content: The page at 'https://test.mysite.com/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/NunitoSans/NunitoSans-Regular.ttf'. This request has been blocked; the content must be served over HTTPS.

How can I fix this?

[RashikShahjahan]

@GITchristoph , the mixed content issue was fixed after I changed the url on the config.toml file from example.com. I still couldn't fix the favicon issue though. Let me no if you have any progress on that.

[GITchristoph]

@RashikShahjahan , I could not figure out how to fix this myself yet. I am also a newbie to this in general and I am not sure yet how to start looking for the issue.

[GITchristoph]

@RashikShahjahan

Could it have something to do with this inside style.sass?
What do you think?

{{ $themeStyle := .Site.Params.themeStyle | default "light" }}
$fa-font-path: '{{ print $.Site.BaseURL "fonts/fontawesome-free/webfonts" }}'
$nunito-font-path: '{{ print $.Site.BaseURL "fonts/NunitoSans" }}'

[GITchristoph]

I can see the thumbs up but I unfortunately do really not know what I should do next, sorry! :-)

[ParagRaut]

You can put favicon under static/img/favicon.ico for example and reference it like this in config.toml

[params]
themeStyle = "light" # Choose "light" or "dark"
favicon = "/img/favicon.ico" # Path to favicon file
showRSSButton = false # Show rss button in navigation

[ParagRaut]

Also try to do hard refresh (ctrl + F5 on windows for example) so it can load fresh assets

[GITchristoph]

Hi @ParagRaut
Thanks for your answer. I explained the issue badly (I edited the issue name).
The favicon is actually ok.

What's the issue are the icons from twitter, facebook, etc.
They don't show when opening the Demo Link:
https://themes.gohugo.io/theme/hugo-theme-introduction/

Please see also picture below with what I mean.

[ParagRaut]

True, I observed this as well. I think it is not propely hosted or something, but if you go to netlify app for same theme there you will see everything rendering correctly. https://hugo-introduction.netlify.com/

[ParagRaut]

I see the config.toml might have different base url, that's why modern browser does not let assets load
Refer this in your dev console when you go to hugo demo site

[GITchristoph]

Hi @ParagRaut
Yes, that is what I posted in my second message in this thread as well (please see above).
I don't know how to fix this.

[RashikShahjahan]

@GITchristoph , any luck?

[GITchristoph]

@RashikShahjahan
Hi, I am sorry, I did not know that someone was waiting for me.
I checked it already and I know, that my base URL settings are correct. That’s why I highlighted it a couple of posts above already. Because although the base URL is correct, even in the demo page the same error occurs

Does that make sense?

[victoriadrake]

@GITchristoph I can see the problem in the demo site, and I just made a fix for it. Please pull the theme again.

If this does not help you, would you be able to share your repository with us so we can try to diagnose the issue further?

[GITchristoph]

Thank you - I will but need a bit of time to get to it.

[RashikShahjahan]

@victoriadrake , I made the changes in the sass file. It still doesn't work. Here's my repo:https://github.com/RashikShahjahan/Website_Personal

[victoriadrake]

@RashikShahjahan when I visit your page, I see this in the console:

It seems "example.com" is still being used. Did you remember to rebuild your site?

[RashikShahjahan]

That's strange. I thought I got rid of this error after I changed the url in config.toml. @victoriadrake

[victoriadrake]

How are you rebuilding your site? If with Netlify, is your Netlify configuration set up to redeploy when a change is pushed?

[RashikShahjahan]

@victoriadrake it's with Netlify. Yes the site redeploys whenever I push a change.

[RashikShahjahan]

@victoriadrake , do I need to change the url anywhere other than config.toml?

[victoriadrake]

It would depend on your settings, but I don’t think so. Can you find an option to “Clear cache and deploy”? It should be in a drop-down menu on the “Deploy site” button. That might help.

[RashikShahjahan]

@victoriadrake , I tried that. Didn't help. Could the build command be an issue?

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

[hellojinwoo]

Guess this issue has not been fixed :(

[victoriadrake]

@victoriadrake , I tried that. Didn't help. Could the build command be an issue?

I see your netlify.toml uses $DEPLOY_PRIME_URL. Is that the same URL as shown in your config.toml as baseURL?

7167496 might fix this for the demo site. We'll be able to see after Hugo's themes site's next deploy.

[joelgrimberg]

same issue here. it works on my localhost but not when I push it and run it on Amplify

[joelgrimberg]

workaround: copy the fotns folder from your example folder to the root of your project 🎉

[RashikShahjahan]

@joelgrimberg , I don't see a fonts folder under exampleSite.

[joelgrimberg]

I copied the complete /themes/introduction/static/fonts folder to the root of my project ( so that in my root I will find the '/fonts/..' - folder

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

[joelgrimberg]

it's still an issue; icons are still not showing:
themes.gohugo.io/theme/hugo-theme-introduction

[victoriadrake]

Bad bot.

[MyGiHu]

It should be fixed with pull request #285. The demo page is still broken because it is not build with the extended version of hugo and PostCSS. Source: Hugo themes readme. Pull request #286 contains updated resources and the next update is proposed on this Friday.

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

[victoriadrake]

This is fixed now!