diff --git a/.bootstraprc-3-default b/.bootstraprc-3-default index 23fd9cc7..dcc9595d 100644 --- a/.bootstraprc-3-default +++ b/.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 diff --git a/README.md b/README.md index 358a0a65..0162227d 100644 --- a/README.md +++ b/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: diff --git a/examples/basic/.bootstraprc b/examples/basic/.bootstraprc index 56b74ed1..008e6a66 100644 --- a/examples/basic/.bootstraprc +++ b/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 diff --git a/examples/basic/.bootstraprc-3-example b/examples/basic/.bootstraprc-3-example index 56b74ed1..008e6a66 100644 --- a/examples/basic/.bootstraprc-3-example +++ b/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 diff --git a/examples/basic/app/styles/bootstrap/pre-customizations.scss b/examples/basic/app/styles/bootstrap/pre-customizations.scss index e7841c65..7e8393ba 100644 --- a/examples/basic/app/styles/bootstrap/pre-customizations.scss +++ b/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. diff --git a/examples/css-modules/.bootstraprc b/examples/css-modules/.bootstraprc index 8ee9e9d3..9f6039f5 100644 --- a/examples/css-modules/.bootstraprc +++ b/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 diff --git a/examples/css-modules/.bootstraprc-3-example b/examples/css-modules/.bootstraprc-3-example index 8ee9e9d3..9f6039f5 100644 --- a/examples/css-modules/.bootstraprc-3-example +++ b/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 diff --git a/examples/css-modules/app/assets/styles/bootstrap/pre-customizations.scss b/examples/css-modules/app/assets/styles/bootstrap/pre-customizations.scss index 3f3ff20c..ea762a55 100644 --- a/examples/css-modules/app/assets/styles/bootstrap/pre-customizations.scss +++ b/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. diff --git a/src/bootstrap.config.js b/src/bootstrap.config.js index 8e50899c..3be9a1bc 100644 --- a/src/bootstrap.config.js +++ b/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), diff --git a/src/bootstrap.styles.loader.js b/src/bootstrap.styles.loader.js index dfeba03d..4336fe9b 100644 --- a/src/bootstrap.styles.loader.js +++ b/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)}";` );