deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-06-10 01:32:28 +02:00
Code Issues Projects Releases Wiki Activity

final adjustments to changing css icon prefix

Browse source
This commit is contained in:
davegandy 2013-09-30 20:55:40 -04:00
parent 676f6ad7b4
commit a3f056991c
7 changed files with 121 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
css/font-awesome.css vendored
View file

@ -34,8 +34,7 @@
} }
/* FONT AWESOME CORE /* FONT AWESOME CORE
* -------------------------- */ * -------------------------- */
[class^="fa-"], .fa {
[class*=" fa-"] {
*margin-right: .3em; *margin-right: .3em;
font-family: FontAwesome; font-family: FontAwesome;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -45,8 +44,7 @@
text-rendering: auto; text-rendering: auto;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
[class^="fa-"]:before, .fa:before {
[class*=" fa-"]:before {
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
speak: none; speak: none;
@ -57,39 +55,35 @@
vertical-align: -10%; vertical-align: -10%;
} }
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a [class^="fa-"], a .fa {
a [class*=" fa-"] {
display: inline; display: inline;
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
[class^="fa-"].fa-fixed-width, .fa.fa-fixed-width {
[class*=" fa-"].fa-fixed-width {
display: inline-block; display: inline-block;
width: 1.1428571428571428em; width: 1.1428571428571428em;
padding-right: 0.2857142857142857em; padding-right: 0.2857142857142857em;
text-align: right; text-align: right;
} }
[class^="fa-"].fa-fixed-width.fa-large, .fa.fa-fixed-width.fa-large {
[class*=" fa-"].fa-fixed-width.fa-large {
width: 1.4285714285714286em; width: 1.4285714285714286em;
} }
.fas-ul { .fa-ul {
padding-left: 0; padding-left: 0;
margin-left: 2.142857142857143em; margin-left: 2.142857142857143em;
list-style-type: none; list-style-type: none;
} }
.fas-ul > li { .fa-ul > li {
position: relative; position: relative;
} }
.fas-ul .fa-li { .fa-ul .fa-li {
position: absolute; position: absolute;
left: -2.142857142857143em; left: -2.142857142857143em;
width: 2.142857142857143em; width: 2.142857142857143em;
line-height: inherit; line-height: inherit;
text-align: center; text-align: center;
} }
[class^="fa-"].hide, .fa.hide {
[class*=" fa-"].hide {
display: none; display: none;
} }
.fa-muted { .fa-muted {
@ -150,19 +144,16 @@ a [class*=" fa-"] {
.pull-left { .pull-left {
float: left; float: left;
} }
[class^="fa-"].pull-left, .fa.pull-left {
[class*=" fa-"].pull-left {
margin-right: .3em; margin-right: .3em;
} }
[class^="fa-"].pull-right, .fa.pull-right {
[class*=" fa-"].pull-right {
margin-left: .3em; margin-left: .3em;
} }
/* BOOTSTRAP SPECIFIC CLASSES /* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */ * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */ /* Bootstrap 2.0 sprites.less reset */
[class^="fa-"], .fa {
[class*=" fa-"] {
display: inline; display: inline;
width: auto; width: auto;
height: auto; height: auto;
@ -173,82 +164,47 @@ a [class*=" fa-"] {
background-position: 0 0; background-position: 0 0;
background-repeat: repeat; background-repeat: repeat;
} }
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="fa-"],
.nav-pills > .active > a > [class*=" fa-"],
.nav-list > .active > a > [class^="fa-"],
.nav-list > .active > a > [class*=" fa-"],
.navbar-inverse .nav > .active > a > [class^="fa-"],
.navbar-inverse .nav > .active > a > [class*=" fa-"],
.dropdown-menu > li > a:hover > [class^="fa-"],
.dropdown-menu > li > a:hover > [class*=" fa-"],
.dropdown-menu > .active > a > [class^="fa-"],
.dropdown-menu > .active > a > [class*=" fa-"],
.dropdown-submenu:hover > a > [class^="fa-"],
.dropdown-submenu:hover > a > [class*=" fa-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn [class^="fa-"].fa-large, .btn .fa.fa-large,
.nav [class^="fa-"].fa-large, .nav .fa.fa-large {
.btn [class*=" fa-"].fa-large,
.nav [class*=" fa-"].fa-large {
line-height: .9em; line-height: .9em;
} }
.btn [class^="fa-"].fa-spin, .btn .fa.fa-spin,
.nav [class^="fa-"].fa-spin, .nav .fa.fa-spin {
.btn [class*=" fa-"].fa-spin,
.nav [class*=" fa-"].fa-spin {
display: inline-block; display: inline-block;
} }
.nav-tabs [class^="fa-"], .nav-tabs .fa,
.nav-pills [class^="fa-"], .nav-pills .fa,
.nav-tabs [class*=" fa-"], .nav-tabs .fa.fa-large,
.nav-pills [class*=" fa-"], .nav-pills .fa.fa-large {
.nav-tabs [class^="fa-"].fa-large,
.nav-pills [class^="fa-"].fa-large,
.nav-tabs [class*=" fa-"].fa-large,
.nav-pills [class*=" fa-"].fa-large {
line-height: .9em; line-height: .9em;
} }
.btn [class^="fa-"].pull-left.fa-2x, .btn .fa.pull-left.fa-2x,
.btn [class*=" fa-"].pull-left.fa-2x, .btn .fa.pull-right.fa-2x {
.btn [class^="fa-"].pull-right.fa-2x,
.btn [class*=" fa-"].pull-right.fa-2x {
margin-top: .18em; margin-top: .18em;
} }
.btn [class^="fa-"].fa-spin.fa-large, .btn .fa.fa-spin.fa-large {
.btn [class*=" fa-"].fa-spin.fa-large {
line-height: .8em; line-height: .8em;
} }
.btn.btn-small [class^="fa-"].pull-left.fa-2x, .btn.btn-small .fa.pull-left.fa-2x,
.btn.btn-small [class*=" fa-"].pull-left.fa-2x, .btn.btn-small .fa.pull-right.fa-2x {
.btn.btn-small [class^="fa-"].pull-right.fa-2x,
.btn.btn-small [class*=" fa-"].pull-right.fa-2x {
margin-top: .25em; margin-top: .25em;
} }
.btn.btn-large [class^="fa-"], .btn.btn-large .fa {
.btn.btn-large [class*=" fa-"] {
margin-top: 0; margin-top: 0;
} }
.btn.btn-large [class^="fa-"].pull-left.fa-2x, .btn.btn-large .fa.pull-left.fa-2x,
.btn.btn-large [class*=" fa-"].pull-left.fa-2x, .btn.btn-large .fa.pull-right.fa-2x {
.btn.btn-large [class^="fa-"].pull-right.fa-2x,
.btn.btn-large [class*=" fa-"].pull-right.fa-2x {
margin-top: .05em; margin-top: .05em;
} }
.btn.btn-large [class^="fa-"].pull-left.fa-2x, .btn.btn-large .fa.pull-left.fa-2x {
.btn.btn-large [class*=" fa-"].pull-left.fa-2x {
margin-right: .2em; margin-right: .2em;
} }
.btn.btn-large [class^="fa-"].pull-right.fa-2x, .btn.btn-large .fa.pull-right.fa-2x {
.btn.btn-large [class*=" fa-"].pull-right.fa-2x {
margin-left: .2em; margin-left: .2em;
} }
/* Fixes alignment in nav lists */ /* Fixes alignment in nav lists */
.nav-list [class^="fa-"], .nav-list .fa {
.nav-list [class*=" fa-"] {
line-height: inherit; line-height: inherit;
} }
/* EXTRAS /* EXTRAS

41
css/font-awesome.min.css vendored
View file

@ -1,11 +1,11 @@
@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}[class^="fa-"],[class*=" fa-"]{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;} @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
[class^="fa-"]:before,[class*=" fa-"]:before{display:inline-block;text-decoration:inherit;speak:none;} .fa:before{display:inline-block;text-decoration:inherit;speak:none;}
.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;} .fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;}
a [class^="fa-"],a [class*=" fa-"]{display:inline;} a .fa{display:inline;}
[class^="fa-"].fa-fixed-width,[class*=" fa-"].fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}[class^="fa-"].fa-fixed-width.fa-large,[class*=" fa-"].fa-fixed-width.fa-large{width:1.4285714285714286em;} .fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;}
.fas-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fas-ul>li{position:relative;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
.fas-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
[class^="fa-"].hide,[class*=" fa-"].hide{display:none;} .fa.hide{display:none;}
.fa-muted{color:#eeeeee;} .fa-muted{color:#eeeeee;}
.fa-light{color:#ffffff;} .fa-light{color:#ffffff;}
.fa-dark{color:#333333;} .fa-dark{color:#333333;}
@ -16,20 +16,19 @@ a [class^="fa-"],a [class*=" fa-"]{display:inline;}
.fa-5x{font-size:5em;}.fa-5x.fa-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;} .fa-5x{font-size:5em;}.fa-5x.fa-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
.pull-right{float:right;} .pull-right{float:right;}
.pull-left{float:left;} .pull-left{float:left;}
[class^="fa-"].pull-left,[class*=" fa-"].pull-left{margin-right:.3em;} .fa.pull-left{margin-right:.3em;}
[class^="fa-"].pull-right,[class*=" fa-"].pull-right{margin-left:.3em;} .fa.pull-right{margin-left:.3em;}
[class^="fa-"],[class*=" fa-"]{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;} .fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
.icon-white,.nav-pills>.active>a>[class^="fa-"],.nav-pills>.active>a>[class*=" fa-"],.nav-list>.active>a>[class^="fa-"],.nav-list>.active>a>[class*=" fa-"],.navbar-inverse .nav>.active>a>[class^="fa-"],.navbar-inverse .nav>.active>a>[class*=" fa-"],.dropdown-menu>li>a:hover>[class^="fa-"],.dropdown-menu>li>a:hover>[class*=" fa-"],.dropdown-menu>.active>a>[class^="fa-"],.dropdown-menu>.active>a>[class*=" fa-"],.dropdown-submenu:hover>a>[class^="fa-"],.dropdown-submenu:hover>a>[class*=" fa-"]{background-image:none;} .btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;}
.btn [class^="fa-"].fa-large,.nav [class^="fa-"].fa-large,.btn [class*=" fa-"].fa-large,.nav [class*=" fa-"].fa-large{line-height:.9em;} .btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;}
.btn [class^="fa-"].fa-spin,.nav [class^="fa-"].fa-spin,.btn [class*=" fa-"].fa-spin,.nav [class*=" fa-"].fa-spin{display:inline-block;} .nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;}
.nav-tabs [class^="fa-"],.nav-pills [class^="fa-"],.nav-tabs [class*=" fa-"],.nav-pills [class*=" fa-"],.nav-tabs [class^="fa-"].fa-large,.nav-pills [class^="fa-"].fa-large,.nav-tabs [class*=" fa-"].fa-large,.nav-pills [class*=" fa-"].fa-large{line-height:.9em;} .btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;}
.btn [class^="fa-"].pull-left.fa-2x,.btn [class*=" fa-"].pull-left.fa-2x,.btn [class^="fa-"].pull-right.fa-2x,.btn [class*=" fa-"].pull-right.fa-2x{margin-top:.18em;} .btn .fa.fa-spin.fa-large{line-height:.8em;}
.btn [class^="fa-"].fa-spin.fa-large,.btn [class*=" fa-"].fa-spin.fa-large{line-height:.8em;} .btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;}
.btn.btn-small [class^="fa-"].pull-left.fa-2x,.btn.btn-small [class*=" fa-"].pull-left.fa-2x,.btn.btn-small [class^="fa-"].pull-right.fa-2x,.btn.btn-small [class*=" fa-"].pull-right.fa-2x{margin-top:.25em;} .btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;}
.btn.btn-large [class^="fa-"],.btn.btn-large [class*=" fa-"]{margin-top:0;}.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x,.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-top:.05em;} .btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;} .btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;}
.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;} .nav-list .fa{line-height:inherit;}
.nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;}
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
.fa-stack .fa-stack-base{font-size:2em;*line-height:1em;} .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;}
.fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}

38
less/bootstrap.less vendored
View file

@ -2,8 +2,7 @@
* -------------------------- */ * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */ /* Bootstrap 2.0 sprites.less reset */
[class^="fa-"], .fa {
[class*=" fa-"] {
display: inline; display: inline;
width: auto; width: auto;
height: auto; height: auto;
@ -15,42 +14,22 @@
background-repeat: repeat; background-repeat: repeat;
} }
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="fa-"],
.nav-pills > .active > a > [class*=" fa-"],
.nav-list > .active > a > [class^="fa-"],
.nav-list > .active > a > [class*=" fa-"],
.navbar-inverse .nav > .active > a > [class^="fa-"],
.navbar-inverse .nav > .active > a > [class*=" fa-"],
.dropdown-menu > li > a:hover > [class^="fa-"],
.dropdown-menu > li > a:hover > [class*=" fa-"],
.dropdown-menu > .active > a > [class^="fa-"],
.dropdown-menu > .active > a > [class*=" fa-"],
.dropdown-submenu:hover > a > [class^="fa-"],
.dropdown-submenu:hover > a > [class*=" fa-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {
[class^="fa-"], .fa {
[class*=" fa-"] {
// display: inline; // display: inline;
&.fa-large { line-height: .9em; } &.fa-large { line-height: .9em; }
&.fa-spin { display: inline-block; } &.fa-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
[class^="fa-"], .fa {
[class*=" fa-"] {
&, &.fa-large { line-height: .9em; } &, &.fa-large { line-height: .9em; }
} }
} }
.btn { .btn {
[class^="fa-"], .fa {
[class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .18em; } &.fa-2x { margin-top: .18em; }
} }
@ -58,16 +37,14 @@
} }
} }
.btn.btn-small { .btn.btn-small {
[class^="fa-"], .fa {
[class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .25em; } &.fa-2x { margin-top: .25em; }
} }
} }
} }
.btn.btn-large { .btn.btn-large {
[class^="fa-"], .fa {
[class*=" fa-"] {
margin-top: 0; // overrides bootstrap default margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .05em; } &.fa-2x { margin-top: .05em; }
@ -78,7 +55,6 @@
} }
/* Fixes alignment in nav lists */ /* Fixes alignment in nav lists */
.nav-list [class^="fa-"], .nav-list .fa {
.nav-list [class*=" fa-"] {
line-height: inherit; line-height: inherit;
} }

20
less/core.less
View file

@ -1,13 +1,11 @@
/* FONT AWESOME CORE /* FONT AWESOME CORE
* -------------------------- */ * -------------------------- */
[class^="fa-"], .fa {
[class*=" fa-"] {
.icon-FontAwesome(); .icon-FontAwesome();
} }
[class^="fa-"]:before, .fa:before {
[class*=" fa-"]:before {
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
speak: none; speak: none;
@ -21,15 +19,13 @@
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a { a {
[class^="fa-"], .fa {
[class*=" fa-"] {
display: inline; display: inline;
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
[class^="fa-"], .fa {
[class*=" fa-"] {
&.fa-fixed-width { &.fa-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
@ -41,7 +37,7 @@ a {
} }
} }
.fas-ul { .fa-ul {
padding-left: 0; padding-left: 0;
margin-left: @icons-li-width; margin-left: @icons-li-width;
list-style-type: none; list-style-type: none;
@ -58,8 +54,7 @@ a {
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons
[class^="fa-"], .fa {
[class*=" fa-"] {
&.hide { &.hide {
display: none; display: none;
} }
@ -119,8 +114,7 @@ a {
.pull-right { float: right; } .pull-right { float: right; }
.pull-left { float: left; } .pull-left { float: left; }
[class^="fa-"], .fa {
[class*=" fa-"] {
&.pull-left { &.pull-left {
margin-right: .3em; margin-right: .3em;
} }

50
src/assets/font-awesome/less/bootstrap.less vendored
View file

@ -4,8 +4,7 @@
* -------------------------- */ * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */ /* Bootstrap 2.0 sprites.less reset */
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
display: inline; display: inline;
width: auto; width: auto;
height: auto; height: auto;
@ -17,59 +16,37 @@
background-repeat: repeat; background-repeat: repeat;
} }
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="fa-"],
.nav-pills > .active > a > [class*=" fa-"],
.nav-list > .active > a > [class^="fa-"],
.nav-list > .active > a > [class*=" fa-"],
.navbar-inverse .nav > .active > a > [class^="fa-"],
.navbar-inverse .nav > .active > a > [class*=" fa-"],
.dropdown-menu > li > a:hover > [class^="fa-"],
.dropdown-menu > li > a:hover > [class*=" fa-"],
.dropdown-menu > .active > a > [class^="fa-"],
.dropdown-menu > .active > a > [class*=" fa-"],
.dropdown-submenu:hover > a > [class^="fa-"],
.dropdown-submenu:hover > a > [class*=" fa-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
// display: inline; // display: inline;
&.fa-large { line-height: .9em; } &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
&.fa-spin { display: inline-block; } &.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] { &, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
&, &.fa-large { line-height: .9em; }
} }
} }
.btn { .btn {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .18em; } &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; }
} }
&.fa-spin.fa-large { line-height: .8em; } &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-large { line-height: .8em; }
} }
} }
.btn.btn-small { .btn.btn-small {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .25em; } &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .25em; }
} }
} }
} }
.btn.btn-large { .btn.btn-large {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
margin-top: 0; // overrides bootstrap default margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .05em; } &.fa-2x { margin-top: .05em; }
@ -80,7 +57,6 @@
} }
/* Fixes alignment in nav lists */ /* Fixes alignment in nav lists */
.nav-list [class^="fa-"], .nav-list .fa {
.nav-list [class*=" fa-"] {
line-height: inherit; line-height: inherit;
} }

52
src/assets/font-awesome/less/core.less vendored
View file

@ -3,54 +3,50 @@
/* FONT AWESOME CORE /* FONT AWESOME CORE
* -------------------------- */ * -------------------------- */
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
.icon-FontAwesome(); .icon-FontAwesome();
} }
[class^="fa-"]:before, .{{ site.fontawesome.css_prefix }}:before {
[class*=" fa-"]:before {
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
speak: none; speak: none;
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.fa-large:before { .{{ site.fontawesome.css_prefix }}-large:before {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -10%;
} }
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a { a {
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
display: inline; display: inline;
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] { &.{{ site.fontawesome.css_prefix }}-fixed-width {
&.fa-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
padding-right: (4em / 14); padding-right: (4em / 14);
text-align: right; text-align: right;
&.fa-large { &.{{ site.fontawesome.css_prefix }}-large {
width: (20em / 14); width: (20em / 14);
} }
} }
} }
.fas-ul { .{{ site.fontawesome.css_prefix }}-ul {
padding-left: 0; padding-left: 0;
margin-left: @icons-li-width; margin-left: @icons-li-width;
list-style-type: none; list-style-type: none;
> li { position: relative; } > li { position: relative; }
.fa-li { .{{ site.fontawesome.css_prefix }}-li {
position: absolute; position: absolute;
left: -@icons-li-width; left: -@icons-li-width;
width: @icons-li-width; width: @icons-li-width;
@ -60,21 +56,20 @@ a {
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
&.hide { &.hide {
display: none; display: none;
} }
} }
.fa-muted { color: @iconMuted; } .{{ site.fontawesome.css_prefix }}-muted { color: @iconMuted; }
.fa-light { color: @iconLight; } .{{ site.fontawesome.css_prefix }}-light { color: @iconLight; }
.fa-dark { color: @iconDark; } .{{ site.fontawesome.css_prefix }}-dark { color: @iconDark; }
// Icon Borders // Icon Borders
// ------------------------- // -------------------------
.fa-border { .{{ site.fontawesome.css_prefix }}-border {
padding: .2em .25em .15em; padding: .2em .25em .15em;
border: solid 1px @borderColor; border: solid 1px @borderColor;
.border-radius(3px); .border-radius(3px);
@ -83,31 +78,31 @@ a {
// Icon Sizes // Icon Sizes
// ------------------------- // -------------------------
.fa-2x { .{{ site.fontawesome.css_prefix }}-2x {
font-size: 2em; font-size: 2em;
&.fa-border { &.{{ site.fontawesome.css_prefix }}-border {
border-width: 2px; border-width: 2px;
.border-radius(4px); .border-radius(4px);
} }
} }
.fa-3x { .{{ site.fontawesome.css_prefix }}-3x {
font-size: 3em; font-size: 3em;
&.fa-border { &.{{ site.fontawesome.css_prefix }}-border {
border-width: 3px; border-width: 3px;
.border-radius(5px); .border-radius(5px);
} }
} }
.fa-4x { .{{ site.fontawesome.css_prefix }}-4x {
font-size: 4em; font-size: 4em;
&.fa-border { &.{{ site.fontawesome.css_prefix }}-border {
border-width: 4px; border-width: 4px;
.border-radius(6px); .border-radius(6px);
} }
} }
.fa-5x { .{{ site.fontawesome.css_prefix }}-5x {
font-size: 5em; font-size: 5em;
&.fa-border { &.{{ site.fontawesome.css_prefix }}-border {
border-width: 5px; border-width: 5px;
.border-radius(7px); .border-radius(7px);
} }
@ -121,8 +116,7 @@ a {
.pull-right { float: right; } .pull-right { float: right; }
.pull-left { float: left; } .pull-left { float: left; }
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
&.pull-left { &.pull-left {
margin-right: .3em; margin-right: .3em;
} }

40
src/test.html
View file

@ -450,7 +450,7 @@ relative_path: ../
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
</ul> </ul>
@ -477,7 +477,7 @@ relative_path: ../
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
</ul> </ul>
@ -536,7 +536,7 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -549,7 +549,7 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -560,7 +560,7 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul lead"> <ul class="fa-ul lead">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -569,7 +569,7 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul lead"> <ul class="fa-ul lead">
<li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -580,7 +580,7 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -589,7 +589,7 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-arrow-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-li fa fa-arrow-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="fa-li fa fa-building fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-building fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -600,10 +600,10 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label">foo</span>
<a class="btn">foo</a> <a class="btn">foo</a>
@ -613,10 +613,10 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fas-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-refresh fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label">foo</span>
<a class="btn">foo</a> <a class="btn">foo</a>
@ -666,8 +666,8 @@ relative_path: ../
<button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-spinner fa-spin"></i> Loading... <i class="fa fa-spinner fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa-spinner fa-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-large">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
@ -688,8 +688,8 @@ relative_path: ../
<button class="btn"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-spinner fa-large fa-spin"></i> Loading... <i class="fa fa-spinner fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa-spinner fa-large fa-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-spinner fa-large fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-large">Loading...</button>
<i class="fa fa-circle-blank fa-large fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
@ -698,14 +698,14 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="fa-spinner fa-spin"></i></span> <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
<input class="span2" id="prependedInput" type="text" placeholder="Username"> <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div> </div>
</div> </div>
<div class="span6"> <div class="span6">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" type="text"> <input class="span2" id="appendedInput" type="text">
<span class="add-on"><i class="fa-spinner fa-spin"></i></span> <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
</div> </div>
</div> </div>
</div> </div>