问题
I am using Jekyll to build my blog site, which is hosted by Github, and I am trying to incorporate font-awesome. The fa icons don't show up, and now my Github page is not updated with my latest blog post.
I've tried to link the font-awesome stylesheets to my css. I ended up using {% includes font-awesome.css %} in my stylesheet.css file, and I think that works fine.
In my navbar html, I've included the typical font-awesome i tag like so:
<li><a href="{{ site.baseurl }}/index.html"><i class='fa-home'></i> Home</a></li>
But the icons are not showing up on my Github site.
Also Github pages won't let me use the Jekyll-font-awesome plugin. This was the plugin I used: https://gist.github.com/23maverick23/8532525 I added the plugin, jekyll build worked, but after I pushed the files to Github, I got this message from Github:
The page build failed with the following error:
The tag
iconin_includes/navbar.html,is not a recognized Liquid tag. https://help.github.com/articles/page-build-failed-unknown-tag-error
So I've removed the plugin and reverted to the recommended 'i' tags instead of the liquid tags.
When run jekyll build everything works fine. Then I commit my changes and push to github, and no errors.
When I run jekyll serve and view it locally, the icons show up and my latest blog post is visible.
But when I go to my Github page, my new blog post is not updating, and the font-awesome icons are not showing up.
Where did I go wrong? Why does Github Pages not like Font Awesome?
回答1:
Just after opening of <head> tag in default.html, include the css for font awesome :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Then, you should be using the icons as
<li><a href="{{ site.baseurl }}/index.html"><i class='fa fa-home'></i> Home</a></li>
If this does not work, then its because github doesnot build you pages from markdown if you have plugins.
If you need third party plugins then you should have two branches one for source and other for the html build by jekyll. You should push the builds in master branch and sources in any other branch.
You can configure these in __config.yml for source and destination and destination goes to master branch. You can view my __config.yml for reference. I push the sources in src branch and contents of destination in master branch. By pushing the html builds, github wouldn't try to build from sources.
回答2:
It might be because you have a FontAwesome Pro account. If you are a FontAwesome Pro account-holder, you need to register each domain you plan to use with your Pro CDN link.
For example, even if you include your Pro CDN link in your site's <head>, like this:
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha12345blahblahblahblahblah" crossorigin="anonymous">
Your icons still may not show up. To resolve this, you need to sign in to your FontAwesome account and register each new domain to your CDN.
I am a Pro user (from the 2017 Kickstarter Campaign) and ran into this very problem. Registering my domain solved my problem promptly.
来源：https://stackoverflow.com/questions/25797627/why-is-font-awesome-not-working-on-my-jekyll-built-github-site