Search code examples
javascriptnode.jsazureazure-web-app-serviceghost-blog

Ghost.js deployment on Azure websites does not show icons properly

I've been following the instruction on Scott Hanselman's blog for how to deploy ghost.js from source to an Azure Website. It mostly works, except the icons on the admin page show up as square boxes instead of the correct icon.

Ghost.js admin page with square boxes instead of icons

I enabled diagnostic logging according to the steps on this page but didn't find anything that looked suspicious (no error messages or anything).

Any tips on how I can debug this? I've tried following these steps multiple times, always with the same results.

Thanks

Solution

  • Ghost uses unicode characters for these icons. They are not images, they are rather normal unicode glyphs. If the font your browser is using by default doesn't have these glyphs it won't be able to display them. Some browsers will detect this (Firefox) and replace the glyphs from another font, while others (Chrome) might stick to the glyphs in the default font.

    Try a different browser, and you should be able to see the icons, then change the font on your default browser.

    Update 1:

    Scott's instructions are missing a step. He asks you to comment the line in .gitignore that tells git to ignore checking in the CSS that gurnt just build in 

    # /core/client/assets/css

    but you also need to comment the line under it to have git include the fonts as well

    # /core/client/assets/fonts