mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-04-25 11:30:57 +02:00
re-writing & simplifying stacked icons, massive re-organization of less include files
This commit is contained in:
davegandy
parent
2879ed25ad
commit
448d3ddb7f
104
css/font-awesome.css
vendored
104
css/font-awesome.css
vendored
|
|
@ -31,8 +31,6 @@
|
|||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* FONT AWESOME CORE
|
||||
* -------------------------- */
|
||||
.fa {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
|
|
@ -48,6 +46,18 @@
|
|||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
.fa-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.fa-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
.fa-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
.fa-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
.fa-fw {
|
||||
width: 1.2857142857142858em;
|
||||
text-align: center;
|
||||
|
|
@ -70,50 +80,11 @@
|
|||
.fa-li.fa-lg {
|
||||
left: -1.8571428571428572em;
|
||||
}
|
||||
.fa.hide {
|
||||
display: none;
|
||||
}
|
||||
.fa-muted {
|
||||
color: #eeeeee;
|
||||
}
|
||||
.fa-light {
|
||||
color: #ffffff;
|
||||
}
|
||||
.fa-dark {
|
||||
color: #333333;
|
||||
}
|
||||
.fa-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 1px #eeeeee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.fa-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.fa-2x.fa-border {
|
||||
border-width: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.fa-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
.fa-3x.fa-border {
|
||||
border-width: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.fa-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
.fa-4x.fa-border {
|
||||
border-width: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.fa-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
.fa-5x.fa-border {
|
||||
border-width: 5px;
|
||||
border-radius: 7px;
|
||||
border-width: .08em;
|
||||
border-radius: .1em;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
|
|
@ -127,30 +98,6 @@
|
|||
.fa.pull-right {
|
||||
margin-left: .3em;
|
||||
}
|
||||
/* EXTRAS
|
||||
* -------------------------- */
|
||||
/* Stacked and layered icon */
|
||||
.fa-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
vertical-align: -35%;
|
||||
}
|
||||
.fa-stack .fa {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1em;
|
||||
line-height: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.fa-stack .fa-stack-base {
|
||||
font-size: 2em;
|
||||
}
|
||||
/* Animated rotating icon */
|
||||
.fa-spin {
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
|
|
@ -235,6 +182,29 @@
|
|||
-o-transform: scale(1, -1);
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
.fa-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fa-stack-top,
|
||||
.fa-stack-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.fa-stack-top {
|
||||
line-height: inherit;
|
||||
}
|
||||
.fa-stack-bottom {
|
||||
font-size: 2em;
|
||||
}
|
||||
.fa-inverse {
|
||||
color: #ffffff;
|
||||
}
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
.fa-glass:before {
|
||||
|
|
|
|||
21
css/font-awesome.min.css
vendored
21
css/font-awesome.min.css
vendored
|
|
@ -1,29 +1,28 @@
|
|||
@font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
||||
.fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
|
||||
.fa-2x{font-size:2em}
|
||||
.fa-3x{font-size:3em}
|
||||
.fa-4x{font-size:4em}
|
||||
.fa-5x{font-size:5em}
|
||||
.fa-fw{width:1.2857142857142858em;text-align:center}
|
||||
.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative}
|
||||
.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em}
|
||||
.fa.hide{display:none}
|
||||
.fa-muted{color:#eee}
|
||||
.fa-light{color:#fff}
|
||||
.fa-dark{color:#333}
|
||||
.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-radius:3px}
|
||||
.fa-2x{font-size:2em}.fa-2x.fa-border{border-width:2px;border-radius:4px}
|
||||
.fa-3x{font-size:3em}.fa-3x.fa-border{border-width:3px;border-radius:5px}
|
||||
.fa-4x{font-size:4em}.fa-4x.fa-border{border-width:4px;border-radius:6px}
|
||||
.fa-5x{font-size:5em}.fa-5x.fa-border{border-width:5px;border-radius:7px}
|
||||
.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-width:.08em;border-radius:.1em}
|
||||
.pull-right{float:right}
|
||||
.pull-left{float:left}
|
||||
.fa.pull-left{margin-right:.3em}
|
||||
.fa.pull-right{margin-left:.3em}
|
||||
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;text-align:center}
|
||||
.fa-stack .fa-stack-base{font-size:2em}
|
||||
.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
|
||||
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
|
||||
.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
|
||||
.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
|
||||
.fa-flip-horizontal{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}
|
||||
.fa-flip-vertical{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}
|
||||
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
|
||||
.fa-stack-top,.fa-stack-bottom{position:absolute;width:100%;text-align:center}
|
||||
.fa-stack-top{line-height:inherit}
|
||||
.fa-stack-bottom{font-size:2em}
|
||||
.fa-inverse{color:#fff}
|
||||
.fa-glass:before{content:"\f000"}
|
||||
.fa-music:before{content:"\f001"}
|
||||
.fa-search:before{content:"\f002"}
|
||||
|
|
|
|||
17
less/bordered-pulled.less
Normal file
17
less/bordered-pulled.less
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Bordered & Pulled
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 1px @fa-border-color;
|
||||
border-width: .08em;
|
||||
border-radius: .1em;
|
||||
}
|
||||
|
||||
.pull-right { float: right; }
|
||||
.pull-left { float: left; }
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
&.pull-left { margin-right: .3em; }
|
||||
&.pull-right { margin-left: .3em; }
|
||||
}
|
||||
102
less/core.less
102
less/core.less
|
|
@ -1,5 +1,5 @@
|
|||
/* FONT AWESOME CORE
|
||||
* -------------------------- */
|
||||
// Base Class Definition
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
display: inline-block;
|
||||
|
|
@ -10,101 +10,3 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.@{fa-css-prefix}-lg {
|
||||
font-size: (4em / 3);
|
||||
line-height: (3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.@{fa-css-prefix}-fw {
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Icon UL & LI
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-ul {
|
||||
padding-left: 0;
|
||||
margin-left: @fa-icon-li-width;
|
||||
list-style-type: none;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
.@{fa-css-prefix}-li {
|
||||
position: absolute;
|
||||
left: -@fa-icon-li-width;
|
||||
width: @fa-icon-li-width;
|
||||
top: (2em / 14);
|
||||
text-align: center;
|
||||
&.@{fa-css-prefix}-lg {
|
||||
left: -@fa-icon-li-width + (4em / 14);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// allows usage of the hide class directly on font awesome icons
|
||||
.@{fa-css-prefix}.hide { display: none; }
|
||||
|
||||
.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
|
||||
.@{fa-css-prefix}-light { color: @fa-icon-light; }
|
||||
.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
|
||||
|
||||
|
||||
// Icon Borders
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 1px @fa-border-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
// Icon Sizes
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-2x {
|
||||
font-size: 2em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-3x {
|
||||
font-size: 3em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-4x {
|
||||
font-size: 4em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-5x {
|
||||
font-size: 5em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 5px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Floats & Margins
|
||||
// -------------------------
|
||||
|
||||
// Quick floats
|
||||
.pull-right { float: right; }
|
||||
.pull-left { float: left; }
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
&.pull-left { margin-right: .3em; }
|
||||
&.pull-right { margin-left: .3em; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,2 @@
|
|||
/* EXTRAS
|
||||
* -------------------------- */
|
||||
|
||||
/* Stacked and layered icon */
|
||||
.fa-icon-stack();
|
||||
|
||||
/* Animated rotating icon */
|
||||
.@{fa-css-prefix}-spin {
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(359deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(359deg); }
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(359deg); }
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(359deg); }
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
}
|
||||
|
||||
|
||||
// Icon rotations & flipping
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
|
||||
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
|
||||
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
|
||||
|
||||
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
|
||||
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }
|
||||
// Extras
|
||||
// --------------------------
|
||||
|
|
|
|||
6
less/fixed-width.less
Normal file
6
less/fixed-width.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// Fixed Width Icons
|
||||
// -------------------------
|
||||
.@{fa-css-prefix}-fw {
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
18
less/font-awesome.less
vendored
18
less/font-awesome.less
vendored
|
|
@ -24,9 +24,15 @@
|
|||
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
|
||||
*/
|
||||
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
@import "path.less";
|
||||
@import "core.less";
|
||||
@import "extras.less";
|
||||
@import "icons.less";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "path";
|
||||
@import "core";
|
||||
@import "larger";
|
||||
@import "fixed-width";
|
||||
@import "list";
|
||||
@import "bordered-pulled";
|
||||
@import "spinning";
|
||||
@import "rotated-flipped";
|
||||
@import "stacked";
|
||||
@import "icons";
|
||||
|
|
|
|||
13
less/larger.less
Normal file
13
less/larger.less
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Icon Sizes
|
||||
// -------------------------
|
||||
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.@{fa-css-prefix}-lg {
|
||||
font-size: (4em / 3);
|
||||
line-height: (3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
.@{fa-css-prefix}-2x { font-size: 2em; }
|
||||
.@{fa-css-prefix}-3x { font-size: 3em; }
|
||||
.@{fa-css-prefix}-4x { font-size: 4em; }
|
||||
.@{fa-css-prefix}-5x { font-size: 5em; }
|
||||
20
less/list.less
Normal file
20
less/list.less
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// Icon UL & LI
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-ul {
|
||||
padding-left: 0;
|
||||
margin-left: @fa-icon-li-width;
|
||||
list-style-type: none;
|
||||
> li { position: relative; }
|
||||
}
|
||||
.@{fa-css-prefix}-li {
|
||||
position: absolute;
|
||||
left: -@fa-icon-li-width;
|
||||
width: @fa-icon-li-width;
|
||||
top: (2em / 14);
|
||||
text-align: center;
|
||||
&.@{fa-css-prefix}-lg {
|
||||
left: -@fa-icon-li-width + (4em / 14);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,26 +17,3 @@
|
|||
-o-transform: scale(@horiz, @vert);
|
||||
transform: scale(@horiz, @vert);
|
||||
}
|
||||
|
||||
.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
|
||||
.@{fa-css-prefix}-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @width;
|
||||
height: @height;
|
||||
line-height: @width;
|
||||
vertical-align: -35%;
|
||||
.@{fa-css-prefix} {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: @top-font-size;
|
||||
line-height: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-base {
|
||||
font-size: @base-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
less/rotated-flipped.less
Normal file
9
less/rotated-flipped.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// Rotated & Flipped Icons
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
|
||||
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
|
||||
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
|
||||
|
||||
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
|
||||
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }
|
||||
30
less/spinning.less
Normal file
30
less/spinning.less
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// Spinning Icons
|
||||
// --------------------------
|
||||
|
||||
.@{fa-css-prefix}-spin {
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(359deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(359deg); }
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(359deg); }
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(359deg); }
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
}
|
||||
19
less/stacked.less
Normal file
19
less/stacked.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Stacked Icons
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-top { line-height: inherit; }
|
||||
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
|
||||
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
|
||||
|
|
@ -6,9 +6,7 @@
|
|||
@fa-css-prefix: fa;
|
||||
@fa-version: "4.0.0";
|
||||
@fa-border-color: #eee;
|
||||
@fa-icon-muted: #eee;
|
||||
@fa-icon-light: #fff;
|
||||
@fa-icon-dark: #333;
|
||||
@fa-icon-inverse: #fff;
|
||||
@fa-icon-li-width: (30em / 14);
|
||||
|
||||
@fa-var-glass: "\f000";
|
||||
|
|
|
|||
|
|
@ -17,14 +17,10 @@
|
|||
line-height: (3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
/* increased font size for icon-lg */
|
||||
|
||||
.#{$fa-css-prefix}-fixed-width {
|
||||
width: (16em / 14);
|
||||
padding-right: (4em / 14);
|
||||
text-align: right;
|
||||
&.#{$fa-css-prefix}-lg {
|
||||
width: (20em / 14);
|
||||
}
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent">
|
||||
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
|
||||
<i class="fa fa-quote-left fa-4x pull-left"></i>
|
||||
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
|
||||
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
|
||||
of them in any combination to get lots of new possibilities.
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
|
||||
<i class="fa fa-quote-left fa-4x pull-left"></i>
|
||||
Use a few of the new styles together ... lots of new possibilities.
|
||||
{% endhighlight %}
|
||||
<div class="well well-large well-transparent clearfix">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>
|
||||
For use when variable width throws off alignment. Especially useful in things like nav lists.
|
||||
The <code>fa-fw</code> sets icons at a fixed width. For use when variable width throws off alignment. Especially useful in things like nav lists.
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<section id="list-bullets">
|
||||
<h2 class="page-header">List Bullets</h2>
|
||||
<section id="list-icons">
|
||||
<h2 class="page-header">List Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<ul class="fa-ul">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<p>Easily replace individual list bullets.</p>
|
||||
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace individual list bullets.</p>
|
||||
{% highlight html %}
|
||||
<ul class="fa-ul">
|
||||
<li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li>
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
fa-twitter on fa-unchecked<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-flag fa-light"></i>
|
||||
<i class="fa fa-flag fa-inverse"></i>
|
||||
</span>
|
||||
fa-flag on fa-circle<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-terminal fa-light"></i>
|
||||
<i class="fa fa-terminal fa-inverse"></i>
|
||||
</span>
|
||||
fa-terminal on fa-square<br>
|
||||
<span class="fa-stack">
|
||||
|
|
|
|||
|
|
@ -2,51 +2,52 @@
|
|||
<h2 class="page-header">Stacked Icons</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4">
|
||||
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
|
||||
<code>fa-stack-base</code> for the bottom icon.
|
||||
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-top</code>
|
||||
for the regularly sized icon, and <code>fa-stack-bottom</code> for the larger bottom icon. <code>fa-inverse</code>
|
||||
can be used as an alternative icon color.
|
||||
</div>
|
||||
<div class="col-md-9 col-sm-8">
|
||||
<div class="well well-large well-transparent lead">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-unchecked fa-stack-base"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-square-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top"></i>
|
||||
</span>
|
||||
fa-twitter on fa-unchecked<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-flag fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
fa-flag on fa-circle<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-terminal fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
fa-terminal on fa-square<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-camera"></i>
|
||||
<i class="fa fa-ban fa-stack-base text-danger"></i>
|
||||
<i class="fa fa-camera fa-stack-top"></i>
|
||||
<i class="fa fa-ban fa-stack-bottom text-danger"></i>
|
||||
</span>
|
||||
fa-camera on fa-ban
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-unchecked fa-stack-base"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-square-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top"></i>
|
||||
</span>
|
||||
fa-twitter on fa-unchecked<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-flag fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-flag fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
fa-flag on fa-circle<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-sign-blank fa-stack-base"></i>
|
||||
<i class="fa fa-terminal fa-light"></i>
|
||||
<i class="fa fa-sign-blank fa-stack-bottom"></i>
|
||||
<i class="fa fa-terminal fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
fa-terminal on fa-sign-blank<br>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-camera"></i>
|
||||
<i class="fa fa-ban-circle fa-stack-base text-danger"></i>
|
||||
<i class="fa fa-camera fa-stack-top"></i>
|
||||
<i class="fa fa-ban-circle fa-stack-bottom text-danger"></i>
|
||||
</span>
|
||||
fa-camera on fa-ban-circle
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#list-icons">List Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#spinning">Spinning Icons</a></li>
|
||||
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated & Flipped</a></li>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-twitter fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-facebook fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-github fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
|
|
@ -24,22 +24,22 @@
|
|||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-twitter fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-facebook fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-github fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
|
|
@ -47,22 +47,22 @@
|
|||
<p>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-facebook"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
</a>
|
||||
<a href="#">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,51 @@
|
|||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-twitter fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-facebook fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-square fa-stack-base"></i>
|
||||
<i class="fa fa-github fa-light"></i>
|
||||
<i class="fa fa-square fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-twitter fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-facebook fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-base"></i>
|
||||
<i class="fa fa-github fa-light"></i>
|
||||
<i class="fa fa-circle fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top fa-inverse"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
||||
<p>
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-twitter fa-stack-top"></i>
|
||||
</span>
|
||||
Twitter Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-facebook"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-facebook fa-stack-top"></i>
|
||||
</span>
|
||||
Facebook Icon
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle-o fa-stack-base"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-circle-o fa-stack-bottom"></i>
|
||||
<i class="fa fa-github fa-stack-top"></i>
|
||||
</span>
|
||||
GitHub Icon
|
||||
</p>
|
||||
20
src/assets/font-awesome/less/bordered-pulled.less
vendored
Normal file
20
src/assets/font-awesome/less/bordered-pulled.less
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Bordered & Pulled
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 1px @fa-border-color;
|
||||
border-width: .08em;
|
||||
border-radius: .1em;
|
||||
}
|
||||
|
||||
.pull-right { float: right; }
|
||||
.pull-left { float: left; }
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
&.pull-left { margin-right: .3em; }
|
||||
&.pull-right { margin-left: .3em; }
|
||||
}
|
||||
103
src/assets/font-awesome/less/core.less
vendored
103
src/assets/font-awesome/less/core.less
vendored
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
---
|
||||
/* FONT AWESOME CORE
|
||||
* -------------------------- */
|
||||
|
||||
// Base Class Definition
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
display: inline-block;
|
||||
|
|
@ -12,101 +13,3 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.@{fa-css-prefix}-lg {
|
||||
font-size: (4em / 3);
|
||||
line-height: (3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.@{fa-css-prefix}-fw {
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Icon UL & LI
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-ul {
|
||||
padding-left: 0;
|
||||
margin-left: @fa-icon-li-width;
|
||||
list-style-type: none;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
.@{fa-css-prefix}-li {
|
||||
position: absolute;
|
||||
left: -@fa-icon-li-width;
|
||||
width: @fa-icon-li-width;
|
||||
top: (2em / 14);
|
||||
text-align: center;
|
||||
&.@{fa-css-prefix}-lg {
|
||||
left: -@fa-icon-li-width + (4em / 14);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// allows usage of the hide class directly on font awesome icons
|
||||
.@{fa-css-prefix}.hide { display: none; }
|
||||
|
||||
.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
|
||||
.@{fa-css-prefix}-light { color: @fa-icon-light; }
|
||||
.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
|
||||
|
||||
|
||||
// Icon Borders
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 1px @fa-border-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
// Icon Sizes
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-2x {
|
||||
font-size: 2em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-3x {
|
||||
font-size: 3em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-4x {
|
||||
font-size: 4em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.@{fa-css-prefix}-5x {
|
||||
font-size: 5em;
|
||||
&.@{fa-css-prefix}-border {
|
||||
border-width: 5px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Floats & Margins
|
||||
// -------------------------
|
||||
|
||||
// Quick floats
|
||||
.pull-right { float: right; }
|
||||
.pull-left { float: left; }
|
||||
|
||||
.@{fa-css-prefix} {
|
||||
&.pull-left { margin-right: .3em; }
|
||||
&.pull-right { margin-left: .3em; }
|
||||
}
|
||||
|
|
|
|||
9
src/assets/font-awesome/less/fixed-width.less
vendored
Normal file
9
src/assets/font-awesome/less/fixed-width.less
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Fixed Width Icons
|
||||
// -------------------------
|
||||
.@{fa-css-prefix}-fw {
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
18
src/assets/font-awesome/less/font-awesome.less
vendored
18
src/assets/font-awesome/less/font-awesome.less
vendored
|
|
@ -2,9 +2,15 @@
|
|||
---
|
||||
{% include license-code.less %}
|
||||
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
@import "path.less";
|
||||
@import "core.less";
|
||||
@import "extras.less";
|
||||
@import "icons.less";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "path";
|
||||
@import "core";
|
||||
@import "larger";
|
||||
@import "fixed-width";
|
||||
@import "list";
|
||||
@import "bordered-pulled";
|
||||
@import "spinning";
|
||||
@import "rotated-flipped";
|
||||
@import "stacked";
|
||||
@import "icons";
|
||||
|
|
|
|||
16
src/assets/font-awesome/less/larger.less
vendored
Normal file
16
src/assets/font-awesome/less/larger.less
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Icon Sizes
|
||||
// -------------------------
|
||||
|
||||
/* makes the font 33% larger relative to the icon container */
|
||||
.@{fa-css-prefix}-lg {
|
||||
font-size: (4em / 3);
|
||||
line-height: (3em / 4);
|
||||
vertical-align: -15%;
|
||||
}
|
||||
.@{fa-css-prefix}-2x { font-size: 2em; }
|
||||
.@{fa-css-prefix}-3x { font-size: 3em; }
|
||||
.@{fa-css-prefix}-4x { font-size: 4em; }
|
||||
.@{fa-css-prefix}-5x { font-size: 5em; }
|
||||
23
src/assets/font-awesome/less/list.less
vendored
Normal file
23
src/assets/font-awesome/less/list.less
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Icon UL & LI
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-ul {
|
||||
padding-left: 0;
|
||||
margin-left: @fa-icon-li-width;
|
||||
list-style-type: none;
|
||||
> li { position: relative; }
|
||||
}
|
||||
.@{fa-css-prefix}-li {
|
||||
position: absolute;
|
||||
left: -@fa-icon-li-width;
|
||||
width: @fa-icon-li-width;
|
||||
top: (2em / 14);
|
||||
text-align: center;
|
||||
&.@{fa-css-prefix}-lg {
|
||||
left: -@fa-icon-li-width + (4em / 14);
|
||||
}
|
||||
}
|
||||
|
||||
23
src/assets/font-awesome/less/mixins.less
vendored
23
src/assets/font-awesome/less/mixins.less
vendored
|
|
@ -19,26 +19,3 @@
|
|||
-o-transform: scale(@horiz, @vert);
|
||||
transform: scale(@horiz, @vert);
|
||||
}
|
||||
|
||||
.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
|
||||
.@{fa-css-prefix}-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @width;
|
||||
height: @height;
|
||||
line-height: @width;
|
||||
vertical-align: -35%;
|
||||
.@{fa-css-prefix} {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: @top-font-size;
|
||||
line-height: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-base {
|
||||
font-size: @base-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
src/assets/font-awesome/less/rotated-flipped.less
vendored
Normal file
12
src/assets/font-awesome/less/rotated-flipped.less
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Rotated & Flipped Icons
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
|
||||
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
|
||||
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
|
||||
|
||||
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
|
||||
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
---
|
||||
---
|
||||
/* EXTRAS
|
||||
* -------------------------- */
|
||||
|
||||
/* Stacked and layered icon */
|
||||
.fa-icon-stack();
|
||||
// Spinning Icons
|
||||
// --------------------------
|
||||
|
||||
/* Animated rotating icon */
|
||||
.@{fa-css-prefix}-spin {
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
|
|
@ -34,14 +31,3 @@
|
|||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
}
|
||||
|
||||
|
||||
// Icon rotations & flipping
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
|
||||
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
|
||||
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
|
||||
|
||||
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
|
||||
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1); }
|
||||
22
src/assets/font-awesome/less/stacked.less
vendored
Normal file
22
src/assets/font-awesome/less/stacked.less
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
---
|
||||
|
||||
// Stacked Icons
|
||||
// -------------------------
|
||||
|
||||
.@{fa-css-prefix}-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.@{fa-css-prefix}-stack-top { line-height: inherit; }
|
||||
.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
|
||||
.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
|
||||
4
src/assets/font-awesome/less/variables.less
vendored
4
src/assets/font-awesome/less/variables.less
vendored
|
|
@ -8,9 +8,7 @@
|
|||
@fa-css-prefix: {{ site.fontawesome.css_prefix }};
|
||||
@fa-version: "{{ site.fontawesome.version }}";
|
||||
@fa-border-color: #eee;
|
||||
@fa-icon-muted: #eee;
|
||||
@fa-icon-light: #fff;
|
||||
@fa-icon-dark: #333;
|
||||
@fa-icon-inverse: #fff;
|
||||
@fa-icon-li-width: (30em / 14);
|
||||
|
||||
{% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}";
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ relative_path: ../
|
|||
{% include examples/inline-icons.html %}
|
||||
{% include examples/larger-icons.html %}
|
||||
{% include examples/fixed-width.html %}
|
||||
{% include examples/lists.html %}
|
||||
{% include examples/list.html %}
|
||||
{% include examples/bordered-pulled.html %}
|
||||
{% include examples/spinning.html %}
|
||||
{% include examples/rotated-flipped.html %}
|
||||
|
|
|
|||
|
|
@ -88,10 +88,10 @@ relative_path: ../
|
|||
<a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
|
||||
<a href="#">Link Here<i class="fa fa-angle-double-right padding-left"></i></a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
|
||||
<a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left"></i></a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
|
||||
|
|
@ -108,10 +108,10 @@ relative_path: ../
|
|||
<a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
|
||||
<a href="#">Link Here<i class="fa fa-angle-double-right padding-left-sm"></i></a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
|
||||
<a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left-sm"></i></a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
|
||||
|
|
@ -541,7 +541,7 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<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-angle-double-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.
|
||||
<i class="fa fa-building"></i>
|
||||
|
|
@ -554,9 +554,13 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<ul class="fa-ul">
|
||||
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<i class="fa fa-building"></i>
|
||||
<span class="label label-default">foo</span>
|
||||
<a class="btn btn-default btn-xs">foo</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -565,7 +569,7 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<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-angle-double-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>
|
||||
</ul>
|
||||
|
|
@ -574,7 +578,7 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<ul class="fa-ul lead">
|
||||
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
</ul>
|
||||
|
|
@ -585,7 +589,7 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<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-angle-double-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>
|
||||
</ul>
|
||||
|
|
@ -594,7 +598,7 @@ relative_path: ../
|
|||
<div class="col-md-6">
|
||||
<div style="border: solid 1px #d3d3d3;">
|
||||
<ul class="fa-ul">
|
||||
<li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><a href="#"><i class="fa-li fa fa-angle-double-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></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-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue