FA5 free support

- after much deliberation, no SVG framework at this time - the "old boring way" works just fine

FA5 free support
- after much deliberation, no SVG framework at this time - the "old boring way" works just fine
a18e0033 · David Haynes · 70420aeb · a18e0033 · a18e0033 · a18e0033
Verified Commit a18e0033 authored Dec 18, 2017 by David Haynes 🙆
Showing with 27 additions and 7 deletions

gulpfile.js gulpfile.js +15 -1

src/html/index.html src/html/index.html +5 -6

src/scss/_variables.scss src/scss/_variables.scss +2 -0

src/scss/masonstrap.scss src/scss/masonstrap.scss +5 -0

No files found.
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,6 +14,20 @@ const connect = require('gulp-connect');
 const src = './src'
 const dest = './build'

+// Move fonts to build/fonts
+gulp.task('fonts', () => {
+  let brands = gulp.src('./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-brands-400.woff2')
+  .pipe(gulp.dest(dest + '/fonts/'))
+
+  let regular = gulp.src('./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-regular-400.woff2')
+  .pipe(gulp.dest(dest + '/fonts/'))
+  
+  let solid = gulp.src('./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff2')
+  .pipe(gulp.dest(dest + '/fonts/'))
+
+  return merge(brands, regular, solid).pipe(connect.reload())  
+});
+
 // Move html to build/html
 gulp.task('html', () => gulp.src(src + '/html/*.html').pipe(connect.reload())
  .pipe(gulp.dest(dest))
@@ -69,7 +83,7 @@ gulp.task('http', () => {
 });

 // Run all tasks
-gulp.task('build', ['sass', 'html', 'img', 'js']);
+gulp.task('build', ['sass', 'html', 'img', 'js', 'fonts']);

 // By default, run all tasks and then rebuild on changes
 gulp.task('default', ['http', 'build', 'watch']);
\ No newline at end of file
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -68,17 +68,16 @@
  <body style="">
    <div class="container" style="padding-top: 5rem;">
      <h1>
-        <span class="fa-stack fa-md hidden-sm-down">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-paint-brush fa-stack-1x fa-inverse"></i>
-          </span> Masonstrap
+          <span class="fa-stack">
+              <i class="fas fa-circle fa-stack-2x"></i>
+              <i class="fas fa-paint-brush fa-stack-1x fa-inverse"></i>
+            </span> Masonstrap
      </h1>
      <hr />
  </body>

  <!-- load in external js -->
  <script src="./js/jquery.min.js"></script>
-  <script src="./js/popper.min.js"></script>
-  <script src="./js/bootstrap.min.js"></script>
+  <script src="./js/bootstrap.bundle.min.js"></script>

 </html>
\ No newline at end of file
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
 // Masonstrap 4.0 Variables

+$fa-font-path:   "../fonts";
+
 // Global Bootstrap Options Overrides ------------------------------------------
 $enable-shadows: true;
 $enable-gradients: true;

--- a/src/scss/masonstrap.scss
+++ b/src/scss/masonstrap.scss
@@ -9,6 +9,11 @@
 @import "_functions";
 // Load in variable overwrites
 @import '_variables';
+// Load in FA 5
+@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss';
+@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands.scss';
+@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-regular.scss';
+@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss';
 // Load in bootstrap 4
 @import '../../node_modules/bootstrap/scss/bootstrap';
 // Masonstrap custom mixins