Merge pull request #39 from HorizonXP/allow-custom-icon-font-path

Add option for custom $icon-font-path

Author: alex35mil

.bootstraprc-3-default

@@ -5,6 +5,9 @@
 # Major version of Bootstrap: 3 or 4
 bootstrapVersion: 3
 
+# If Bootstrap version 3 is used - turn on/off custom icon font path
+useCustomIconFontPath: false
+
 # Webpack loaders, order matters
 styleLoaders:
   - style

README.md

@@ -218,6 +218,22 @@ scripts:
 scripts: true / false
 ```
 
+#### `useCustomIconFontPath`
+
+Default: false
+
+If you're using a custom icon font and you need to specify its path (`$icon-font-path`) in your Sass files, set this option to true.
+
+```yaml
+useCustomIconFontPath: true / false
+```
+
+```
+$icon-font-path: ../fonts // relative to your Sass file
+$icon-font-name: 'glyphicons' // you'll typically want to change this too.
+```
+
+
 ### Bootstrap 4
 There is only one additional option for Bootstrap 4:
 

examples/basic/.bootstraprc

@@ -5,6 +5,9 @@
 # Major version of Bootstrap: 3 or 4
 bootstrapVersion: 3
 
+# If Bootstrap version 3 is used - turn on/off custom icon font path
+useCustomIconFontPath: false
+
 # Webpack loaders, order matters
 styleLoaders:
   - style

examples/basic/.bootstraprc-3-example

@@ -5,6 +5,9 @@
 # Major version of Bootstrap: 3 or 4
 bootstrapVersion: 3
 
+# If Bootstrap version 3 is used - turn on/off custom icon font path
+useCustomIconFontPath: false
+
 # Webpack loaders, order matters
 styleLoaders:
   - style

examples/basic/app/styles/bootstrap/pre-customizations.scss

@@ -19,3 +19,8 @@ $fonts-url-path: '../fonts';
 // $font-size-base:          14px !default;
 // $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 // $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+// If you're using a custom icon font path, specify it as follows
+// $icon-font-path: ../fonts // This path is relative to this file
+// $icon-font-name: 'glyphicons' // The name of the font you want to use
+// And be sure to set useCustomIconFontPath to true in .bootstraprc.

examples/css-modules/.bootstraprc

@@ -5,6 +5,9 @@
 # Major version of Bootstrap: 3 or 4
 bootstrapVersion: 3
 
+# If Bootstrap version 3 is used - turn on/off custom icon font path
+useCustomIconFontPath: false
+
 # Webpack loaders, order matters
 styleLoaders:
   - style

examples/css-modules/.bootstraprc-3-example

@@ -5,6 +5,9 @@
 # Major version of Bootstrap: 3 or 4
 bootstrapVersion: 3
 
+# If Bootstrap version 3 is used - turn on/off custom icon font path
+useCustomIconFontPath: false
+
 # Webpack loaders, order matters
 styleLoaders:
   - style

examples/css-modules/app/assets/styles/bootstrap/pre-customizations.scss

@@ -12,3 +12,8 @@ $fonts-url-path: '../../fonts';
   src: url('#{$fonts-url-path}/OpenSans-Light.ttf') format('truetype');
 
 }
+
+// If you're using a custom icon font path, specify it as follows
+// $icon-font-path: ../fonts // This path is relative to this file
+// $icon-font-name: 'glyphicons' // The name of the font you want to use
+// And be sure to set useCustomIconFontPath to true in .bootstraprc.

src/bootstrap.config.js

@@ -86,6 +86,7 @@ export function createConfig({
       bootstrapCustomizations,
       appStyles,
       useFlexbox: rawConfig.useFlexbox,
+      useCustomIconFontPath: rawConfig.useCustomIconFontPath,
       extractStyles: extractStyles || getEnvProp('extractStyles', rawConfig),
       styleLoaders: rawConfig.styleLoaders,
       styles: selectUserModules(rawConfig.styles, defaultConfig.styles),
@@ -99,6 +100,7 @@ export function createConfig({
     bootstrapVersion,
     loglevel,
     useFlexbox: defaultConfig.useFlexbox,
+    useCustomIconFontPath: defaultConfig.useCustomIconFontPath,
     extractStyles: extractStyles || getEnvProp('extractStyles', defaultConfig),
     styleLoaders: defaultConfig.styleLoaders,
     styles: selectModules(defaultConfig.styles),

src/bootstrap.styles.loader.js

@@ -20,6 +20,7 @@ module.exports = function() {
     styles,
     bootstrapRelPath,
     useFlexbox,
+    useCustomIconFontPath,
     preBootstrapCustomizations,
     bootstrapCustomizations,
     appStyles,
@@ -47,7 +48,7 @@ module.exports = function() {
     createBootstrapImport('variables', bootstrapVersion, bootstrapRelPath)
   );
 
-  if (bootstrapVersion === 3) {
+  if (bootstrapVersion === 3 && !useCustomIconFontPath) {
     processedStyles.push(
       `$icon-font-path: "${getFontsPath(bootstrapRelPath, this)}";`
     );