Menu
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?
562
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0.
Are you using Font Awesome Free or Pro? Some icons are only available in Font Awesome Pro. Double-check that the icon you want is in the version of Font Awesome you're referencing and using. Also, make sure you are using and referencing the right style prefix and supporting files to use Pro icons.
make sure you have font-weight: 900 . you are using multiple classes fas fa-github btn btn-dark btn-lg if any of these does not have font-weight: 900 font will not show up. but if you are using fas with some other class like . btn it will over write font-weight: 900 and icon will not display.
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.
92
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
