Generate webfonts via fantasticon

- Includes new docs section and fonts page
- Generates CSS and JSON in addition to 4x font types

.fantasticonrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  inputDir: './icons', // (required)
+  outputDir: './font', // (required)
+  fontTypes: ['eot', 'ttf', 'woff', 'woff2'],
+  assetTypes: ['css', 'json', 'html'],
+  name: 'bootstrap-icons',
+  prefix: 'bi',
+  selector: '.bi',
+  fontsUrl: './fonts',
+  formatOptions: {
+    json: {
+      // render the JSON human readable with two spaces indent (default is none, so minified)
+      indent: 2
+    }
+  },
+  // Use a custom Handlebars template
+  templates: {
+    css: './src/css.hbs',
+    html: './src/html.hbs'
+  },
+  pathOptions: {
+    json: './font/bootstrap-icons.json',
+    css: './font/bootstrap-icons.css',
+    html: './font/index.html',
+    ttf: './font/fonts/bootstrap-icons.ttf',
+    woff: './font/fonts/bootstrap-icons.woff',
+    woff2: './font/fonts/bootstrap-icons.woff2',
+    eot: './font/fonts/bootstrap-icons.eot'
+  }
+};

config.yml

@@ -33,6 +33,8 @@ module:
       target:           static/favicon.ico
     - source:           bootstrap-icons.svg
       target:           static/bootstrap-icons.svg
+    - source:           dist/font
+      target:           static/font
 
 params:
   description:          "Official open source SVG icon library for Bootstrap"

docs/assets/scss/docs.scss

@@ -122,3 +122,29 @@
     }
   }
 }
+
+// stylelint-disable
+@font-face {
+  font-family: "bootstrap-icons";
+  src: url("../../font/fonts/bootstrap-icons.eot?1ef5213d557344d80e31924ac255216d#iefix") format("embedded-opentype"),
+       url("../../font/fonts/bootstrap-icons.ttf?1ef5213d557344d80e31924ac255216d") format("truetype"),
+       url("../../font/fonts/bootstrap-icons.woff?1ef5213d557344d80e31924ac255216d") format("woff"),
+       url("../../font/fonts/bootstrap-icons.woff2?1ef5213d557344d80e31924ac255216d") format("woff2");
+}
+
+[class^="bi-"]::before,
+[class*=" bi-"]::before {
+  display: inline-block;
+  font-family: bootstrap-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: text-bottom;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+// stylelint-enable
+
+.bi-alarm::before { content: "\f102"; }

docs/content/_index.md

@@ -76,6 +76,21 @@ Copy the Bootstrap icons SVGs to your directory of choice and reference them lik
   </div>
 </div>
 
+<div class="row my-4">
+  <div class="col-md-4">
+{{< md >}}
+### Icon font
+Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., `<i class="bi-alarm-clock"></i>`).
+
+Use `font-size` and `color` to change the icon appearance.
+{{< /md >}}
+  </div>
+  <div class="col-md-8">
+    {{< example >}}<i class="bi-alarm"></i>{{< /example >}}
+    {{< example >}}<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>{{< /example >}}
+  </div>
+</div>
+
 <div class="row">
   <div class="col-md-4">
 {{< md >}}