From cac2895612ccb8adbf746534c2448e0592f77363 Mon Sep 17 00:00:00 2001 From: James Johnston Date: Tue, 20 Dec 2016 22:59:54 -0800 Subject: [PATCH] Allow custom naming of font family This allows multiple variations/versions of Font Awesome to be used, similar to the namespacing currently allowed by the $fa-css-prefix variable. (And also allows us to more easily use a third-party library that makes hard-coded non-default assumptions about the font face name.) --- _config.yml | 1 + less/core.less | 2 +- less/mixins.less | 2 +- less/path.less | 2 +- less/variables.less | 1 + scss/_core.scss | 2 +- scss/_mixins.scss | 2 +- scss/_path.scss | 2 +- scss/_variables.scss | 1 + src/_includes/code/core.less | 2 +- src/_includes/code/core.scss | 2 +- src/assets/font-awesome/less/path.less | 2 +- src/assets/font-awesome/less/variables.less | 1 + src/assets/font-awesome/scss/_path.scss | 2 +- src/assets/font-awesome/scss/_variables.scss | 1 + 15 files changed, 15 insertions(+), 10 deletions(-) diff --git a/_config.yml b/_config.yml index 18129a1fc..47358d80d 100644 --- a/_config.yml +++ b/_config.yml @@ -29,6 +29,7 @@ fontawesome: twitter: fontawesome tagline: The iconic font and CSS toolkit css_prefix: fa + font_family: FontAwesome author: name: Dave Gandy email: dave@fontawesome.io diff --git a/less/core.less b/less/core.less index c577ac84a..462762260 100644 --- a/less/core.less +++ b/less/core.less @@ -3,7 +3,7 @@ .@{fa-css-prefix} { display: inline-block; - font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration + font: normal normal normal @fa-font-size-base/@fa-line-height-base @fa-font-family; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/less/mixins.less b/less/mixins.less index beef231d0..f0ebc0217 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -3,7 +3,7 @@ .fa-icon() { display: inline-block; - font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration + font: normal normal normal @fa-font-size-base/@fa-line-height-base @fa-font-family; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/less/path.less b/less/path.less index 835be41f8..2164ff303 100644 --- a/less/path.less +++ b/less/path.less @@ -2,7 +2,7 @@ * -------------------------- */ @font-face { - font-family: 'FontAwesome'; + font-family: '@{fa-font-family}'; src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), diff --git a/less/variables.less b/less/variables.less index 7ddbbc011..f467b64ea 100644 --- a/less/variables.less +++ b/less/variables.less @@ -6,6 +6,7 @@ @fa-line-height-base: 1; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"; // for referencing Bootstrap CDN font files directly @fa-css-prefix: fa; +@fa-font-family: FontAwesome; @fa-version: "4.7.0"; @fa-border-color: #eee; @fa-inverse: #fff; diff --git a/scss/_core.scss b/scss/_core.scss index 7425ef85f..e5a87b59d 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -3,7 +3,7 @@ .#{$fa-css-prefix} { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index c3bbd5745..6fdb12847 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -3,7 +3,7 @@ @mixin fa-icon() { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/scss/_path.scss b/scss/_path.scss index bb457c23a..a1a6d04d1 100644 --- a/scss/_path.scss +++ b/scss/_path.scss @@ -2,7 +2,7 @@ * -------------------------- */ @font-face { - font-family: 'FontAwesome'; + font-family: '#{$fa-font-family}'; src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), diff --git a/scss/_variables.scss b/scss/_variables.scss index 498fc4a08..c9bd04014 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -6,6 +6,7 @@ $fa-font-size-base: 14px !default; $fa-line-height-base: 1 !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly $fa-css-prefix: fa !default; +$fa-font-family: FontAwesome !default; $fa-version: "4.7.0" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; diff --git a/src/_includes/code/core.less b/src/_includes/code/core.less index cbd0d1ae7..7ca5f7471 100644 --- a/src/_includes/code/core.less +++ b/src/_includes/code/core.less @@ -1,5 +1,5 @@ display: inline-block; - font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration + font: normal normal normal @fa-font-size-base/@fa-line-height-base @fa-font-family; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/_includes/code/core.scss b/src/_includes/code/core.scss index c7ea6e0e3..4114bc8db 100644 --- a/src/_includes/code/core.scss +++ b/src/_includes/code/core.scss @@ -1,5 +1,5 @@ display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} #{$fa-font-family}; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/assets/font-awesome/less/path.less b/src/assets/font-awesome/less/path.less index 835be41f8..2164ff303 100644 --- a/src/assets/font-awesome/less/path.less +++ b/src/assets/font-awesome/less/path.less @@ -2,7 +2,7 @@ * -------------------------- */ @font-face { - font-family: 'FontAwesome'; + font-family: '@{fa-font-family}'; src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), diff --git a/src/assets/font-awesome/less/variables.less b/src/assets/font-awesome/less/variables.less index 83207e414..74ded185a 100644 --- a/src/assets/font-awesome/less/variables.less +++ b/src/assets/font-awesome/less/variables.less @@ -8,6 +8,7 @@ @fa-line-height-base: 1; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{site.fontawesome.version}}/fonts"; // for referencing Bootstrap CDN font files directly @fa-css-prefix: {{ site.fontawesome.css_prefix }}; +@fa-font-family: {{ site.fontawesome.font_family }}; @fa-version: "{{ site.fontawesome.version }}"; @fa-border-color: #eee; @fa-inverse: #fff; diff --git a/src/assets/font-awesome/scss/_path.scss b/src/assets/font-awesome/scss/_path.scss index bb457c23a..a1a6d04d1 100644 --- a/src/assets/font-awesome/scss/_path.scss +++ b/src/assets/font-awesome/scss/_path.scss @@ -2,7 +2,7 @@ * -------------------------- */ @font-face { - font-family: 'FontAwesome'; + font-family: '#{$fa-font-family}'; src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), diff --git a/src/assets/font-awesome/scss/_variables.scss b/src/assets/font-awesome/scss/_variables.scss index 9dfa9018d..d944ce3af 100644 --- a/src/assets/font-awesome/scss/_variables.scss +++ b/src/assets/font-awesome/scss/_variables.scss @@ -8,6 +8,7 @@ $fa-font-size-base: 14px !default; $fa-line-height-base: 1 !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{site.fontawesome.version}}/fonts" !default; // for referencing Bootstrap CDN font files directly $fa-css-prefix: {{ site.fontawesome.css_prefix }} !default; +$fa-font-family: {{ site.fontawesome.font_family }} !default; $fa-version: "{{ site.fontawesome.version }}" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default;