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

Ionicons

Download and unzip.

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

Bootstrap

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

source/css/all.scss

---

---

$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";

Note

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

Constructs file destination/all.css