final adjustments to changing css icon prefix

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

106
css/font-awesome.css vendored
View file

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

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;}
[class^="fa-"]:before,[class*=" fa-"]:before{display:inline-block;text-decoration:inherit;speak:none;}
@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;}
.fa:before{display:inline-block;text-decoration:inherit;speak:none;}
.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;}
a [class^="fa-"],a [class*=" 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;}
.fas-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fas-ul>li{position:relative;}
.fas-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;}
a .fa{display:inline;}
.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;}
.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
.fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
.fa.hide{display:none;}
.fa-muted{color:#eeeeee;}
.fa-light{color:#ffffff;}
.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;}
.pull-right{float:right;}
.pull-left{float:left;}
[class^="fa-"].pull-left,[class*=" fa-"].pull-left{margin-right:.3em;}
[class^="fa-"].pull-right,[class*=" 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;}
.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 [class^="fa-"].fa-large,.nav [class^="fa-"].fa-large,.btn [class*=" fa-"].fa-large,.nav [class*=" fa-"].fa-large{line-height:.9em;}
.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 [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 [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 [class^="fa-"].fa-spin.fa-large,.btn [class*=" fa-"].fa-spin.fa-large{line-height:.8em;}
.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 [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 [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;}
.nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;}
.fa.pull-left{margin-right:.3em;}
.fa.pull-right{margin-left:.3em;}
.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;}
.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;}
.btn .fa.fa-spin,.nav .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;}
.btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;}
.btn .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-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 .fa.pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;}
.nav-list .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 .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;}

38
less/bootstrap.less vendored
View file

@ -2,8 +2,7 @@
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="fa-"],
[class*=" fa-"] {
.fa {
display: inline;
width: auto;
height: auto;
@ -15,42 +14,22 @@
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 */
.btn, .nav {
[class^="fa-"],
[class*=" fa-"] {
.fa {
// display: inline;
&.fa-large { line-height: .9em; }
&.fa-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="fa-"],
[class*=" fa-"] {
.fa {
&, &.fa-large { line-height: .9em; }
}
}
.btn {
[class^="fa-"],
[class*=" fa-"] {
.fa {
&.pull-left, &.pull-right {
&.fa-2x { margin-top: .18em; }
}
@ -58,16 +37,14 @@
}
}
.btn.btn-small {
[class^="fa-"],
[class*=" fa-"] {
.fa {
&.pull-left, &.pull-right {
&.fa-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="fa-"],
[class*=" fa-"] {
.fa {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.fa-2x { margin-top: .05em; }
@ -78,7 +55,6 @@
}
/* Fixes alignment in nav lists */
.nav-list [class^="fa-"],
.nav-list [class*=" fa-"] {
.nav-list .fa {
line-height: inherit;
}

View file

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

View file

@ -4,8 +4,7 @@
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
display: inline;
width: auto;
height: auto;
@ -17,59 +16,37 @@
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 */
.btn, .nav {
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
// display: inline;
&.fa-large { line-height: .9em; }
&.fa-spin { display: inline-block; }
&.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
&.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="fa-"],
[class*=" fa-"] {
&, &.fa-large { line-height: .9em; }
.{{ site.fontawesome.css_prefix }} {
&, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
}
}
.btn {
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
&.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 {
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
&.pull-left, &.pull-right {
&.fa-2x { margin-top: .25em; }
&.{{ site.fontawesome.css_prefix }}-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.fa-2x { margin-top: .05em; }
@ -80,7 +57,6 @@
}
/* Fixes alignment in nav lists */
.nav-list [class^="fa-"],
.nav-list [class*=" fa-"] {
.nav-list .fa {
line-height: inherit;
}

View file

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

View file

@ -450,7 +450,7 @@ relative_path: ../
</ul>
</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"></i> Nav Item 7</a></li>
</ul>
@ -477,7 +477,7 @@ relative_path: ../
</ul>
</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"></i> Nav Item 7</a></li>
</ul>
@ -536,7 +536,7 @@ relative_path: ../
<div class="row">
<div class="span6">
<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-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.
@ -549,7 +549,7 @@ relative_path: ../
</div>
<div class="span6">
<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-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>
@ -560,7 +560,7 @@ relative_path: ../
<div class="row">
<div class="span6">
<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-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>
@ -569,7 +569,7 @@ relative_path: ../
</div>
<div class="span6">
<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-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>
@ -580,7 +580,7 @@ relative_path: ../
<div class="row">
<div class="span6">
<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-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>
@ -589,7 +589,7 @@ relative_path: ../
</div>
<div class="span6">
<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-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>
@ -600,10 +600,10 @@ relative_path: ../
<div class="row">
<div class="span6">
<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-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. 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.
<i class="fa fa-building"></i>
<span class="label">foo</span>
<a class="btn">foo</a>
@ -613,10 +613,10 @@ relative_path: ../
</div>
<div class="span6">
<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-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. 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.
<i class="fa fa-building"></i>
<span class="label">foo</span>
<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>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="fa-spinner fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa-spinner fa-spin"></i> Loading...</button>
<i class="fa fa-spinner fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button>
<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>
@ -688,8 +688,8 @@ relative_path: ../
<button class="btn"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="fa-spinner fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa-spinner fa-large fa-spin"></i> Loading...</button>
<i class="fa fa-spinner fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-spinner fa-large fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button>
<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>
@ -698,14 +698,14 @@ relative_path: ../
<div class="row">
<div class="span6">
<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">
</div>
</div>
<div class="span6">
<div class="input-append">
<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>