FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2025-01-13 08:40:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
cc39fb9a95
Font-Awesome/sass/font-awesome.scss
Bartosz "Simek" Kaszubowski cc39fb9a95 clarify scss file by defining internal mixin
2013-02-13 22:48:20 +01:00

542 lines
15 KiB
SCSS
Raw Blame History

/*!
* Font Awesome 3.0.2
* 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 - 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" !default;
$borderColor: #eee;
$iconMuted: #eee;
@mixin 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");
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;
/* 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: 1.3333333333333333em;
}
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
/* keeps button heights with and without icons the same */
&.icon-large { line-height: .9em; }
&.icon-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="icon-"],
[class*=" icon-"] {
/* keeps button heights with and without icons the same */
&, &.icon-large { line-height: .9em; }
}
}
li, .nav li {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 1.25em;
text-align: center;
&.icon-large {
/* increased font size for icon-large */
width: 1.5625em;
}
}
}
ul.icons {
list-style-type: none;
text-indent: -.75em;
li {
[class^="icon-"],
[class*=" icon-"] {
width: .75em;
}
}
}
.icon-muted {
color: $iconMuted;
}
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px $borderColor;
padding: .2em .25em .15em;
@include border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
@include border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
@include border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
@include border-radius(6px);
}
}
// 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); }
}
@-moz-document url-prefix() {
.icon-spin { height: .9em; }
.btn .icon-spin { height: auto; }
.icon-spin.icon-large { height: 1.25em; }
.btn .icon-spin.icon-large { height: .75em; }
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
@mixin icon($key, $icon) {
.icon-#{$icon}:before {
content: $key;
}
}
@include icon("\f000", "glass");
@include icon("\f001", "music");
@include icon("\f002", "search");
@include icon("\f003", "envelope");
@include icon("\f004", "heart");
@include icon("\f005", "star");
@include icon("\f006", "star-empty");
@include icon("\f007", "user");
@include icon("\f008", "film");
@include icon("\f009", "th-large");
@include icon("\f00a", "th");
@include icon("\f00b", "th-list");
@include icon("\f00c", "ok");
@include icon("\f00d", "remove");
@include icon("\f00e", "zoom-in");
@include icon("\f010", "zoom-out");
@include icon("\f011", "off");
@include icon("\f012", "signal");
@include icon("\f013", "cog");
@include icon("\f014", "trash");
@include icon("\f015", "home");
@include icon("\f016", "file");
@include icon("\f017", "time");
@include icon("\f018", "road");
@include icon("\f019", "download-alt");
@include icon("\f01a", "download");
@include icon("\f01b", "upload");
@include icon("\f01c", "inbox");
@include icon("\f01d", "play-circle");
@include icon("\f01e", "repeat");
/* \f020 doesn't work in Safari. all shifted one down */
@include icon("\f021", "refresh");
@include icon("\f022", "list-alt");
@include icon("\f023", "lock");
@include icon("\f024", "flag");
@include icon("\f025", "headphones");
@include icon("\f026", "volume-off");
@include icon("\f027", "volume-down");
@include icon("\f028", "volume-up");
@include icon("\f029", "qrcode");
@include icon("\f02a", "barcode");
@include icon("\f02b", "tag");
@include icon("\f02c", "tags");
@include icon("\f02d", "book");
@include icon("\f02e", "bookmark");
@include icon("\f02f", "print");
@include icon("\f030", "camera");
@include icon("\f031", "font");
@include icon("\f032", "bold");
@include icon("\f033", "italic");
@include icon("\f034", "text-height");
@include icon("\f035", "text-width");
@include icon("\f036", "align-left");
@include icon("\f037", "align-center");
@include icon("\f038", "align-right");
@include icon("\f039", "align-justify");
@include icon("\f03a", "list");
@include icon("\f03b", "indent-left");
@include icon("\f03c", "indent-right");
@include icon("\f03d", "facetime-video");
@include icon("\f03e", "picture");
@include icon("\f040", "pencil");
@include icon("\f041", "map-marker");
@include icon("\f042", "adjust");
@include icon("\f043", "tint");
@include icon("\f044", "edit");
@include icon("\f045", "share");
@include icon("\f046", "check");
@include icon("\f047", "move");
@include icon("\f048", "step-backward");
@include icon("\f049", "fast-backward");
@include icon("\f04a", "backward");
@include icon("\f04b", "play");
@include icon("\f04c", "pause");
@include icon("\f04d", "stop");
@include icon("\f04e", "forward");
@include icon("\f050", "fast-forward");
@include icon("\f051", "step-forward");
@include icon("\f052", "eject");
@include icon("\f053", "chevron-left");
@include icon("\f054", "chevron-right");
@include icon("\f055", "plus-sign");
@include icon("\f056", "minus-sign");
@include icon("\f057", "remove-sign");
@include icon("\f058", "ok-sign");
@include icon("\f059", "question-sign");
@include icon("\f05a", "info-sign");
@include icon("\f05b", "screenshot");
@include icon("\f05c", "remove-circle");
@include icon("\f05d", "ok-circle");
@include icon("\f05e", "ban-circle");
@include icon("\f060", "arrow-left");
@include icon("\f061", "arrow-right");
@include icon("\f062", "arrow-up");
@include icon("\f063", "arrow-down");
@include icon("\f064", "share-alt");
@include icon("\f065", "resize-full");
@include icon("\f066", "resize-small");
@include icon("\f067", "plus");
@include icon("\f068", "minus");
@include icon("\f069", "asterisk");
@include icon("\f06a", "exclamation-sign");
@include icon("\f06b", "gift");
@include icon("\f06c", "leaf");
@include icon("\f06d", "fire");
@include icon("\f06e", "eye-open");
@include icon("\f070", "eye-close");
@include icon("\f071", "warning-sign");
@include icon("\f072", "plane");
@include icon("\f073", "calendar");
@include icon("\f074", "random");
@include icon("\f075", "comment");
@include icon("\f076", "magnet");
@include icon("\f077", "chevron-up");
@include icon("\f078", "chevron-down");
@include icon("\f079", "retweet");
@include icon("\f07a", "shopping-cart");
@include icon("\f07b", "folder-close");
@include icon("\f07c", "folder-open");
@include icon("\f07d", "resize-vertical");
@include icon("\f07e", "resize-horizontal");
@include icon("\f080", "bar-chart");
@include icon("\f081", "twitter-sign");
@include icon("\f082", "facebook-sign");
@include icon("\f083", "camera-retro");
@include icon("\f084", "key");
@include icon("\f085", "cogs");
@include icon("\f086", "comments");
@include icon("\f087", "thumbs-up");
@include icon("\f088", "thumbs-down");
@include icon("\f089", "star-half");
@include icon("\f08a", "heart-empty");
@include icon("\f08b", "signout");
@include icon("\f08c", "linkedin-sign");
@include icon("\f08d", "pushpin");
@include icon("\f08e", "external-link");
@include icon("\f090", "signin");
@include icon("\f091", "trophy");
@include icon("\f092", "github-sign");
@include icon("\f093", "upload-alt");
@include icon("\f094", "lemon");
@include icon("\f095", "phone");
@include icon("\f096", "check-empty");
@include icon("\f097", "bookmark-empty");
@include icon("\f098", "phone-sign");
@include icon("\f099", "twitter");
@include icon("\f09a", "facebook");
@include icon("\f09b", "github");
@include icon("\f09c", "unlock");
@include icon("\f09d", "credit-card");
@include icon("\f09e", "rss");
@include icon("\f0a0", "hdd");
@include icon("\f0a1", "bullhorn");
@include icon("\f0a2", "bell");
@include icon("\f0a3", "certificate");
@include icon("\f0a4", "hand-right");
@include icon("\f0a5", "hand-left");
@include icon("\f0a6", "hand-up");
@include icon("\f0a7", "hand-down");
@include icon("\f0a8", "circle-arrow-left");
@include icon("\f0a9", "circle-arrow-right");
@include icon("\f0aa", "circle-arrow-up");
@include icon("\f0ab", "circle-arrow-down");
@include icon("\f0ac", "globe");
@include icon("\f0ad", "wrench");
@include icon("\f0ae", "tasks");
@include icon("\f0b0", "filter");
@include icon("\f0b1", "briefcase");
@include icon("\f0b2", "fullscreen");
@include icon("\f0c0", "group");
@include icon("\f0c1", "link");
@include icon("\f0c2", "cloud");
@include icon("\f0c3", "beaker");
@include icon("\f0c4", "cut");
@include icon("\f0c5", "copy");
@include icon("\f0c6", "paper-clip");
@include icon("\f0c7", "save");
@include icon("\f0c8", "sign-blank");
@include icon("\f0c9", "reorder");
@include icon("\f0ca", "list-ul");
@include icon("\f0cb", "list-ol");
@include icon("\f0cc", "strikethrough");
@include icon("\f0cd", "underline");
@include icon("\f0ce", "table");
@include icon("\f0d0", "magic");
@include icon("\f0d1", "truck");
@include icon("\f0d2", "pinterest");
@include icon("\f0d3", "pinterest-sign");
@include icon("\f0d4", "google-plus-sign");
@include icon("\f0d5", "google-plus");
@include icon("\f0d6", "money");
@include icon("\f0d7", "caret-down");
@include icon("\f0d8", "caret-up");
@include icon("\f0d9", "caret-left");
@include icon("\f0da", "caret-right");
@include icon("\f0db", "columns");
@include icon("\f0dc", "sort");
@include icon("\f0dd", "sort-down");
@include icon("\f0de", "sort-up");
@include icon("\f0e0", "envelope-alt");
@include icon("\f0e1", "linkedin");
@include icon("\f0e2", "undo");
@include icon("\f0e3", "legal");
@include icon("\f0e4", "dashboard");
@include icon("\f0e5", "comment-alt");
@include icon("\f0e6", "comments-alt");
@include icon("\f0e7", "bolt");
@include icon("\f0e8", "sitemap");
@include icon("\f0e9", "umbrella");
@include icon("\f0ea", "paste");
@include icon("\f0eb", "lightbulb");
@include icon("\f0ec", "exchange");
@include icon("\f0ed", "cloud-download");
@include icon("\f0ee", "cloud-upload");
@include icon("\f0f0", "user-md");
@include icon("\f0f1", "stethoscope");
@include icon("\f0f2", "suitcase");
@include icon("\f0f3", "bell-alt");
@include icon("\f0f4", "coffee");
@include icon("\f0f5", "food");
@include icon("\f0f6", "file-alt");
@include icon("\f0f7", "building");
@include icon("\f0f8", "hospital");
@include icon("\f0f9", "ambulance");
@include icon("\f0fa", "medkit");
@include icon("\f0fb", "fighter-jet");
@include icon("\f0fc", "beer");
@include icon("\f0fd", "h-sign");
@include icon("\f0fe", "plus-sign-alt");
@include icon("\f100", "double-angle-left");
@include icon("\f101", "double-angle-right");
@include icon("\f102", "double-angle-up");
@include icon("\f103", "double-angle-down");
@include icon("\f104", "angle-left");
@include icon("\f105", "angle-right");
@include icon("\f106", "angle-up");
@include icon("\f107", "angle-down");
@include icon("\f108", "desktop");
@include icon("\f109", "laptop");
@include icon("\f10a", "tablet");
@include icon("\f10b", "mobile-phone");
@include icon("\f10c", "circle-blank");
@include icon("\f10d", "quote-left");
@include icon("\f10e", "quote-right");
@include icon("\f110", "spinner");
@include icon("\f111", "circle");
@include icon("\f112", "reply");
@include icon("\f113", "github-alt");
@include icon("\f114", "folder-close-alt");
@include icon("\f115", "folder-open-alt");
Reference in New Issue View Git Blame Copy Permalink