separating Font Awesome out into separate LESS files

This commit is contained in:
davegandy 2013-05-07 15:05:08 -04:00
parent 66d84cef92
commit c1b09b6f67
24 changed files with 411 additions and 402 deletions

View File

@ -1,28 +1,26 @@
<section id="icons-social" class="row">
<section id="icons-brand" class="row">
<div class="span12">
<h2 class="page-header">Social Icons</h2>
<h2 class="page-header">Brand Icons</h2>
</div>
<div class="span3">
<ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/phone"><i class="icon-phone"></i> icon-phone</a></li>
<li><a href="{{ site.baseurl }}icon/phone-sign"><i class="icon-phone-sign"></i> icon-phone-sign</a></li>
<li><a href="{{ site.baseurl }}icon/facebook"><i class="icon-facebook"></i> icon-facebook</a></li>
<li><a href="{{ site.baseurl }}icon/facebook-sign"><i class="icon-facebook-sign"></i> icon-facebook-sign</a></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/twitter"><i class="icon-twitter"></i> icon-twitter</a></li>
<li><a href="{{ site.baseurl }}icon/twitter-sign"><i class="icon-twitter-sign"></i> icon-twitter-sign</a></li>
<li><a href="{{ site.baseurl }}icon/github"><i class="icon-github"></i> icon-github</a></li>
<li><a href="{{ site.baseurl }}icon/github-alt"><i class="icon-github-alt"></i> icon-github-alt</a></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/github"><i class="icon-github"></i> icon-github</a></li>
<li><a href="{{ site.baseurl }}icon/github-sign"><i class="icon-github-sign"></i> icon-github-sign</a></li>
<li><a href="{{ site.baseurl }}icon/linkedin"><i class="icon-linkedin"></i> icon-linkedin</a></li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><a href="{{ site.baseurl }}icon/linkedin-sign"><i class="icon-linkedin-sign"></i> icon-linkedin-sign</a></li>
<li><a href="{{ site.baseurl }}icon/maxcdn"><i class="icon-maxcdn"></i> icon-maxcdn</a></li>
<li><a href="{{ site.baseurl }}icon/pinterest"><i class="icon-pinterest"></i> icon-pinterest</a></li>
</ul>
</div>
@ -31,7 +29,6 @@
<li><a href="{{ site.baseurl }}icon/pinterest-sign"><i class="icon-pinterest-sign"></i> icon-pinterest-sign</a></li>
<li><a href="{{ site.baseurl }}icon/google-plus"><i class="icon-google-plus"></i> icon-google-plus</a></li>
<li><a href="{{ site.baseurl }}icon/google-plus-sign"><i class="icon-google-plus-sign"></i> icon-google-plus-sign</a></li>
<li><a href="{{ site.baseurl }}icon/sign-blank"><i class="icon-sign-blank"></i> icon-sign-blank</a></li>
</ul>
</div>
</section>

View File

@ -104,6 +104,8 @@
<li><a href="{{ site.baseurl }}icon/ok-circle"><i class="icon-ok-circle"></i> icon-ok-circle</a></li>
<li><a href="{{ site.baseurl }}icon/ok-sign"><i class="icon-ok-sign"></i> icon-ok-sign</a></li>
<li><a href="{{ site.baseurl }}icon/pencil"><i class="icon-pencil"></i> icon-pencil</a></li>
<li><a href="{{ site.baseurl }}icon/phone"><i class="icon-phone"></i> icon-phone</a></li>
<li><a href="{{ site.baseurl }}icon/phone-sign"><i class="icon-phone-sign"></i> icon-phone-sign</a></li>
<li><a href="{{ site.baseurl }}icon/picture"><i class="icon-picture"></i> icon-picture</a></li>
<li><a href="{{ site.baseurl }}icon/plane"><i class="icon-plane"></i> icon-plane</a></li>
<li><a href="{{ site.baseurl }}icon/plus"><i class="icon-plus"></i> icon-plus</a></li>
@ -135,6 +137,7 @@
<li><a href="{{ site.baseurl }}icon/share"><i class="icon-share"></i> icon-share</a></li>
<li><a href="{{ site.baseurl }}icon/share-alt"><i class="icon-share-alt"></i> icon-share-alt</a></li>
<li><a href="{{ site.baseurl }}icon/shopping-cart"><i class="icon-shopping-cart"></i> icon-shopping-cart</a></li>
<li><a href="{{ site.baseurl }}icon/sign-blank"><i class="icon-sign-blank"></i> icon-sign-blank</a></li>
<li><a href="{{ site.baseurl }}icon/signal"><i class="icon-signal"></i> icon-signal</a></li>
<li><a href="{{ site.baseurl }}icon/signin"><i class="icon-signin"></i> icon-signin</a></li>
<li><a href="{{ site.baseurl }}icon/signout"><i class="icon-signout"></i> icon-signout</a></li>

View File

@ -22,9 +22,9 @@
<link rel="stylesheet" href="{{ site.baseurl }}assets/css/site.css">
<link rel="stylesheet" href="{{ site.baseurl }}assets/css/prettify.css">
<link rel="stylesheet" href="{{ site.baseurl }}assets/css/font-awesome.css">
<link rel="stylesheet" href="{{ site.baseurl }}assets/font-awesome/css/font-awesome.css">
<!--[if IE 7]>
<link rel="stylesheet" href="{{ site.baseurl }}assets/css/font-awesome-ie7.css">
<link rel="stylesheet" href="{{ site.baseurl }}assets/font-awesome/css/font-awesome-ie7.css">
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="{{ site.baseurl }}assets/ico/favicon.ico">

View File

@ -1,13 +1,13 @@
/*!
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* Font Awesome 3.1.0
* the iconic font designed for Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fortawesome.github.com/Font-Awesome/
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 - http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
@ -806,9 +806,6 @@ ul.icons {
.icon-reply {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;');
}
.icon-github-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf113;');
}
.icon-folder-close-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf114;');
}

View File

@ -20,6 +20,8 @@
* Twitter: http://twitter.com/fortaweso_me
* Work: Lead Product Designer @ http://kyruus.com
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.0.1');
@ -27,8 +29,8 @@
font-weight: normal;
font-style: normal;
}
/* Font Awesome styles
------------------------------------------------------- */
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
@ -37,33 +39,6 @@
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
/* sprites.less reset */
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
@ -76,41 +51,7 @@ a [class^="icon-"],
a [class*=" icon-"] {
display: inline-block;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* keeps button heights with and without icons the same */
.btn [class^="icon-"],
.nav [class^="icon-"],
.btn [class*=" icon-"],
.nav [class*=" icon-"] {
display: inline;
}
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
display: inline-block;
}
/* keeps button heights with and without icons the same */
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
line-height: .9em;
}
/* increased font size for icon-large */
li [class^="icon-"],
.nav li [class^="icon-"],
li [class*=" icon-"],
@ -123,8 +64,6 @@ li [class^="icon-"].icon-large,
.nav li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large {
/* increased font size for icon-large */
width: 1.5714285714285714em;
}
ul.icons-ul {
@ -200,6 +139,71 @@ ul.icons-ul > li .icon-li {
[class*=" icon-"].pull-right {
margin-left: .3em;
}
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"],
.nav [class^="icon-"],
.btn [class*=" icon-"],
.nav [class*=" icon-"] {
display: inline;
}
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
display: inline-block;
}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
@ -234,6 +238,8 @@ ul.icons-ul > li .icon-li {
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
margin-left: .2em;
}
/* EXTRAS
* -------------------------- */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
@ -374,7 +380,7 @@ ul.icons-ul > li .icon-li {
.icon-rotate-right:before {
content: "\f01e";
}
/* \f020 doesn't work in Safari. all shifted one down */
/* F020 doesn't work in Safari. all shifted one down */
.icon-refresh:before {
content: "\f021";
}
@ -1026,9 +1032,6 @@ ul.icons-ul > li .icon-li {
.icon-mail-reply:before {
content: "\f112";
}
.icon-github-alt:before {
content: "\f113";
}
.icon-folder-close-alt:before {
content: "\f114";
}

Binary file not shown.

View File

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 135 KiB

View File

@ -0,0 +1,83 @@
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* keeps Bootstrap styles with and without icons the same */
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
&.icon-large { line-height: .9em; }
&.icon-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="icon-"],
[class*=" icon-"] {
&, &.icon-large { line-height: .9em; }
}
}
.btn {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; }
}
&.icon-spin.icon-large { line-height: .8em; }
}
}
.btn.btn-small {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="icon-"],
[class*=" icon-"] {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; }
}
&.pull-left.icon-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; }
}
}

125
build/assets/font-awesome/less/core.less vendored Normal file
View File

@ -0,0 +1,125 @@
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em; // fixes ie7 issues
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
}
}
/* increased font size for icon-large */
li, .nav li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 18/14em;
text-align: center;
&.icon-large {
width: 22/14em;
}
}
}
ul.icons-ul {
list-style-type: none;
text-indent: -10/14em;
margin-left: 30/14em;
> li {
[class^="icon-"],
.icon-li {
width: 10/14em;
}
}
}
// allows usage of the hide class directly on font awesome icons
[class^="icon-"],
[class*=" icon-"] {
&.hide {
display: none;
}
}
.icon-muted {
color: @iconMuted;
}
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @borderColor;
padding: .2em .25em .15em;
.border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
.border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
.border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
.border-radius(6px);
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
.border-radius(7px);
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .3em;
}
&.pull-right {
margin-left: .3em;
}
}

View File

@ -0,0 +1,31 @@
/* EXTRAS
* -------------------------- */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-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); }
}

View File

@ -1,13 +1,13 @@
/*!
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* Font Awesome 3.1.0
* the iconic font designed for Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fortawesome.github.com/Font-Awesome/
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 - http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
@ -78,9 +78,7 @@ ul.icons {
}
.ie7icon(@inner) {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')";
}
.ie7icon(@inner) { *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')"; }
.icon-glass { .ie7icon('&#xf000;'); }
.icon-music { .ie7icon('&#xf001;'); }
@ -345,6 +343,5 @@ ul.icons {
.icon-spinner { .ie7icon('&#xf110;'); }
.icon-circle { .ie7icon('&#xf111;'); }
.icon-reply { .ie7icon('&#xf112;'); }
.icon-github-alt { .ie7icon('&#xf113;'); }
.icon-folder-close-alt { .ie7icon('&#xf114;'); }
.icon-folder-open-alt { .ie7icon('&#xf115;'); }

View File

@ -0,0 +1,30 @@
/*!
* Font Awesome 3.1.0
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fortawesome.github.com/Font-Awesome/
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 - http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
* Contact
* -------------------------------------------------------
* Email: dave@davegandy.com
* Twitter: http://twitter.com/fortaweso_me
* Work: Lead Product Designer @ http://kyruus.com
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "bootstrap.less";
@import "extras.less";
@import "icons.less";

View File

@ -1,284 +1,3 @@
/*!
* Font Awesome 3.1.0
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fortawesome.github.com/Font-Awesome/
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 - http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
* Contact
* -------------------------------------------------------
* Email: dave@davegandy.com
* Twitter: http://twitter.com/fortaweso_me
* Work: Lead Product Designer @ http://kyruus.com
*/
@FontAwesomePath: "../font";
@borderColor: #eee;
@iconMuted: #eee;
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
@font-face {
font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
// src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
// url('@{FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
// url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
// url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg');
src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/* Font Awesome styles
------------------------------------------------------- */
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em; // fixes ie7 issues
/* sprites.less reset */
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
}
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* keeps button heights with and without icons the same */
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
&.icon-large { line-height: .9em; }
&.icon-spin { display: inline-block; }
}
}
/* keeps button heights with and without icons the same */
.nav-tabs, .nav-pills {
[class^="icon-"],
[class*=" icon-"] {
&, &.icon-large { line-height: .9em; }
}
}
li, .nav li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 18/14em;
text-align: center;
&.icon-large {
/* increased font size for icon-large */
width: 22/14em;
}
}
}
ul.icons-ul {
list-style-type: none;
text-indent: -10/14em;
margin-left: 30/14em;
> li {
[class^="icon-"],
.icon-li {
width: 10/14em;
}
}
}
// allows usage of the hide class directly on font awesome icons
[class^="icon-"],
[class*=" icon-"] {
&.hide {
display:none;
}
}
.icon-muted {
color: @iconMuted;
}
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @borderColor;
padding: .2em .25em .15em;
.border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
.border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
.border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
.border-radius(6px);
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
.border-radius(7px);
}
}
// Floats
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .3em;
}
&.pull-right {
margin-left: .3em;
}
}
.btn {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; }
}
&.icon-spin.icon-large { line-height: .8em; }
}
}
.btn.btn-small {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="icon-"],
[class*=" icon-"] {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; }
}
&.pull-left.icon-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; }
}
}
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-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); }
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { content: "\f000"; }
@ -314,7 +33,7 @@ ul.icons-ul {
.icon-repeat:before,
.icon-rotate-right:before { content: "\f01e"; }
/* \f020 doesn't work in Safari. all shifted one down */
/* F020 doesn't work in Safari. all shifted one down */
.icon-refresh:before { content: "\f021"; }
.icon-list-alt:before { content: "\f022"; }
.icon-lock:before { content: "\f023"; }
@ -549,7 +268,6 @@ ul.icons-ul {
.icon-circle:before { content: "\f111"; }
.icon-reply:before,
.icon-mail-reply:before { content: "\f112"; }
.icon-github-alt:before { content: "\f113"; }
.icon-folder-close-alt:before { content: "\f114"; }
.icon-folder-open-alt:before { content: "\f115"; }
.icon-expand-alt:before { content: "\f116"; }

View File

@ -0,0 +1,8 @@
// Mixins
// --------------------------
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

View File

@ -0,0 +1,17 @@
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
// src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
// url('@{FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
// url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
// url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg');
src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

View File

@ -0,0 +1,6 @@
// Variables
// --------------------------
@FontAwesomePath: "../font";
@borderColor: #eee;
@iconMuted: #eee;

Binary file not shown.

View File

@ -865,14 +865,14 @@ icons:
unicode: f081
created: 1.0.0
categories:
- Social Icons
- Brand Icons
- name: facebook-sign
id: facebook-sign
unicode: f082
created: 1.0.0
categories:
- Social Icons
- Brand Icons
- name: camera-retro
id: camera-retro
@ -942,7 +942,7 @@ icons:
unicode: f08c
created: 1.0.0
categories:
- Social Icons
- Brand Icons
- name: pushpin
id: pushpin
@ -978,7 +978,7 @@ icons:
unicode: f092
created: 1.0.0
categories:
- Social Icons
- Brand Icons
- name: upload-alt
id: upload-alt
@ -999,7 +999,7 @@ icons:
unicode: f095
created: 2.0.0
categories:
- Social Icons
- Web Application Icons
- name: check-empty
id: check-empty
@ -1020,28 +1020,28 @@ icons:
unicode: f098
created: 2.0.0
categories:
- Social Icons
- Web Application Icons
- name: twitter
id: twitter
unicode: f099
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: facebook
id: facebook
unicode: f09a
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: github
id: github
unicode: f09b
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: unlock
id: unlock
@ -1254,7 +1254,7 @@ icons:
unicode: f0c8
created: 2.0.0
categories:
- Social Icons
- Web Application Icons
- name: reorder
id: reorder
@ -1318,28 +1318,28 @@ icons:
unicode: f0d2
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: pinterest-sign
id: pinterest-sign
unicode: f0d3
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: google-plus-sign
id: google-plus-sign
unicode: f0d4
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: google-plus
id: google-plus
unicode: f0d5
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: money
id: money
@ -1417,7 +1417,7 @@ icons:
unicode: f0e1
created: 2.0.0
categories:
- Social Icons
- Brand Icons
- name: undo
@ -1751,12 +1751,6 @@ icons:
categories:
- Web Application Icons
- name: github-alt
id: github-alt
unicode: f113
created: 3.0.0
categories:
- Social Icons
- name: folder-close-alt
id: folder-close-alt
@ -1996,4 +1990,4 @@ icons:
unicode: f136
created: 3.1.0
categories:
- Web Application Icons
- Brand Icons

View File

@ -15,6 +15,6 @@ navbar_active: icons
{% include icons/text-editor.html %}
{% include icons/directional.html %}
{% include icons/video-player.html %}
{% include icons/social.html %}
{% include icons/brand.html %}
{% include icons/medical.html %}
</div>