Use fantasticon to generate web fonts

.fantasticonrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  inputDir: './icons', // (required)
+  outputDir: './font', // (required)
+  fontTypes: ['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

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

docs/assets/scss/docs.scss

@@ -140,3 +140,27 @@
   padding-bottom: 4.5rem !important;
 }
 // stylelint-enable declaration-no-important
+
+// stylelint-disable
+@font-face {
+  font-family: bootstrap-icons;
+  src: 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: 400 !important;
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  vertical-align: text-bottom;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bi-alarm::before { content: "\f102"; }
+// stylelint-enable

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 >}}