Jekyll SASS Fonts

Configuring 3rd party Fonts

Jekyll SASS Fonts

by John Vincent

Posted on April 26, 2017

Sass include 3rd party font libraries

This article describes how to sass include 3rd party fonts.

  • bootstrap
  • font awesome
  • ionicons

Font Awesome

Download and unzip.

  • move fonts folder to source/fonts/font-awesome
  • move scss folder to source/_sass/font-awesome


Download and unzip.

  • move fonts folder to source/fonts/ionicons
  • move scss folder to source/_sass/ionicons


Download SASS and unzip.

  • move assets/fonts folder to source/fonts/bootstrap
  • move assets/stylesheets folder to source/_sass/bootstrap-sass
  • move assets/javascripts/bootstrap.min.js to source/js/vendor/bootstrap.min.js

Jekyll Configuration




$icon-font-path:      "../fonts/bootstrap/";
$fa-font-path:        "../fonts/font-awesome";
$ionicons-font-path:  "../fonts/ionicons";

@import "bootstrap-sass/bootstrap";
@import "font-awesome/font-awesome";
@import "ionicons/ionicons";


  • -font-path overrides the default font files location.
  • @import includes library scss

Constructs file destination/all.css