Merge pull request #310 from usebedrock/feature/node-icon-fonts

Node icon fonts

README.md

@@ -81,9 +81,7 @@ See the README at https://github.com/mono-company/bedrock-cli .
 
 ## Using icon fonts
 
-* If you want to use icon fonts you need more dependencies than just node. Icon font generation is optional. Set `icons.generateIconFont` to `true` in `bedrock.config.js` to activate icon fonts.
-* In order for the icon font generation to work, install the required gems using `bundle install`. You will need [Bundler](http://bundler.io) for this. We depend on a Ruby gem called `fontcustom`. Bundler will install the required dependencies.
-    * You will also need to install fontforge using [brew](http://brew.sh). For download instructions see the [fontcustom](https://github.com/FontCustom/fontcustom#installation) repo.
+Icon font generation is optional. Set `icons.generateIconFont` to `true` in `bedrock.config.js` to activate icon fonts.
 
 ## Windows
 
@@ -97,4 +95,4 @@ Bedrock is MIT licensed.
 
 ## Credits
 
-Bedrock was made by the team at [Mono](https://mono.company). Bedrock was initially written by [Thomas Tuts](http://thomastuts.com/).
+Bedrock was made by the team at [Mono](https://mono.company). Bedrock was initially written by [Thomas Tuts](http://thomastuts.com).

content/scss/_icon-font.scss

@@ -1,42 +1,4 @@
-/*
-  Icon Font: icon-font
-*/
-
-@font-face {
-  font-family: "icon-font";
-  src: url("/fonts/icon-font.eot");
-  src: url("/fonts/icon-font.eot?#iefix") format("embedded-opentype"),
-       url("/fonts/icon-font.woff2") format("woff2"),
-       url("/fonts/icon-font.woff") format("woff"),
-       url("/fonts/icon-font.ttf") format("truetype"),
-       url("/fonts/icon-font.svg#icon-font") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: "icon-font";
-    src: url("/fonts/icon-font.svg#icon-font") format("svg");
-  }
-}
-
-[data-icon]:before { content: attr(data-icon); }
-
-[data-icon]:before,
-.if-example:before {
-  display: inline-block;
-  font-family: "icon-font";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  line-height: 1;
-  text-decoration: inherit;
-  text-rendering: optimizeLegibility;
-  text-transform: none;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-.if-example:before { content: "\f100"; }
+// This is an empty placeholder file. You need this
+// when you use icon font generation in Bedrock.
+// Check out README.md on how to enable
+// icon font generation.

core/tasks/icon-font.js

@@ -15,7 +15,7 @@ const iconFontClassPrefix = config.icons && config.icons.iconFontClassPrefix ||
 const destFolder = path.dirname(config.icons.iconFontPath)
 const fileName = path.basename(config.icons.iconFontPath, path.extname(config.icons.iconFontPath))
 
-const cmd = `fontcustom compile ${paths.content.iconFont.sourceDirectory} --name ${FONT_NAME} --selector=".${iconFontClassPrefix}-{{glyph}}" -h -o ${TMP_DIRECTORY}`;
+const cmd = `npx icon-font-generator ${paths.content.iconFont.sourceDirectory}/*.svg -n ${FONT_NAME} -o ${TMP_DIRECTORY} --html false -j false -p ${iconFontClassPrefix} --normalize --height 768 --types woff,woff2`;
 
 module.exports = function (done) {
 
@@ -38,10 +38,8 @@ module.exports = function (done) {
         .pipe(replace('./', '/fonts/'))
         .pipe(gulp.dest(destFolder)),
       gulp.src([
-          path.join(TMP_DIRECTORY, FONT_NAME + '.eot'),
-          path.join(TMP_DIRECTORY, FONT_NAME + '.svg'),
-          path.join(TMP_DIRECTORY, FONT_NAME + '.ttf'),
-          path.join(TMP_DIRECTORY, FONT_NAME + '.woff')
+          path.join(TMP_DIRECTORY, FONT_NAME + '.woff'),
+          path.join(TMP_DIRECTORY, FONT_NAME + '.woff2')
         ])
         .pipe(gulp.dest(paths.compiled.fonts)),
     ];