Use fantasticon to generate web fonts (#515)

* Generate webfonts via fantasticon

- Includes new docs section and fonts page
- Generates CSS and JSON in addition to 4x font types
- Adds new script and hooks into existing icons and zip scripts

* casing

* Update to drop ttf and eot for woff and woff2 only for now

* remove eot and ttf there too

* simplify stylelint

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