font awesome basic configuration

config/webpack.common.js

@@ -132,8 +132,13 @@ module.exports = {
       },
 
       {
-        test: /\.(woff2?|ttf|eot|svg)$/,
+        test: /\.woff(2)?$/,
-        loader: 'url?limit=10000'
+        loader: "url-loader?name=/assets/fonts/[name].[ext]&limit=10000&mimetype=application/font-woff"
+      },
+
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: "file?name=/assets/fonts/[name].[ext]"
       },
 
       {

package.json

@@ -58,6 +58,7 @@
     "bootstrap": "^4.0.0-alpha.2",
     "bootstrap-loader": "^1.0.8",
     "core-js": "^2.2.2",
+    "font-awesome": "^4.6.1",
     "jquery": "^2.2.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",

src/app/theme/sass/_fonts.scss

@@ -0,0 +1,2 @@
+// TODO: is this the best way to resolve modules' paths to the file?
+@import "../../../../node_modules/font-awesome/scss/font-awesome.scss";

src/app/theme/sass/conf/_variables.scss

@@ -56,4 +56,8 @@ $font-thin: 100;
 $font-light: 300;
 $font-normal: 400;
 $font-bold: 700;
-$font-ultraBold: 900;
+$font-ultraBold: 900;
+
+// overrides default font awesome fonts path
+// not needed in case of copying fonts into assets path
+$fa-font-path: $fonts-root;

src/app/theme/theme.scss

@@ -1,4 +1,5 @@
 @import "sass/conf/conf";
+@import "sass/fonts";
 @import "sass/bootstrap-overrides/overrides";
 
 @import "sass/blur-admin-theme";
@@ -7,4 +8,4 @@
 @import "sass/layout";
 @import "sass/preloader";
 @import "sass/socicon";
-@import "sass/table";
+@import "sass/table";