Font awesome showing random symbols locally

Question

I downloaded a popular website template called academic pages and run locally using bundle exec jekyll serve. Everything seems to work as expected except the font-awesome icons in the sidebar seem to take on random images.

I deploy that same code online and the icons render as expected.

Why would this be the case when I haven't changed the code at all?

Answer 1

The problem is because it can't find the fonts; check the path in @font-face and verify that it points to the folder where you saved the fonts.

I checked the fontawesome implementation for SASS and discovered that by default @font-faces are not included in the fontawesome.scss file; modify the file and add them.

@import 'brands';
@import 'regular';
@import 'solid';