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.)
This commit is contained in:
James Johnston 2016-12-20 22:59:54 -08:00
parent 63e9e06e8e
commit cac2895612
15 changed files with 15 additions and 10 deletions

View file

@ -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

View file

@ -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;

View file

@ -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;

View file

@ -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'),

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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'),

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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'),

View file

@ -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;

View file

@ -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'),

View file

@ -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;