/*! ---------------------------------- Font Awesome 3.0.1 ------------------ 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 ---------------------------------- */ /** ---------------------------------- Configuration. ---------------------------------- */ /* Font Awesome. */ $font-awesome-path: '../font' !default; $font-awesome-version: '3.0.2'; $font-awesome-class-prefix: 'icon-' !default; $font-awesome-class-selector: '[class^="#{$font-awesome-class-prefix}"], [class*=" #{$font-awesome-class-prefix}"]'; /* Bootstrap. */ $font-awesome-using-bootstrap: true !default; /* Style options. */ $font-awesome-using-bordered: true !default; $font-awesome-icon-sizes: 2 3 4 !default; /* Helpers. */ $font-awesome-using-floats: true !default; $font-awesome-using-spin: true !default; $font-awesome-spin-class-name: 'icon-spin' !default; $font-awesome-spin-animation-name: font-awesome-spin !default; /* Colors. */ $font-awesome-border-color: #eee !default; $font-awesome-icon-muted: $font-awesome-border-color !default; /* Compass browser support configuration variables. See: http://compass-style.org/reference/compass/support/ */ $experimental-support-for-mozilla: true !default; $experimental-support-for-webkit: true !default; /** ---------------------------------- Mixins. ---------------------------------- */ @mixin font-awesome-border-radius($radius) { @if $experimental-support-for-mozilla { -moz-border-radius: $radius; } @if $experimental-support-for-webkit { -webkit-border-radius: $radius; } border-radius: $radius; } /** ---------------------------------- Font face definition. ---------------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('#{$font-awesome-path}/fontawesome-webfont.eot?v=#{$font-awesome-version}'); src: url('#{$font-awesome-path}/fontawesome-webfont.eot?#iefix&v=#{$font-awesome-version}') format('embedded-opentype'), url('#{$font-awesome-path}/fontawesome-webfont.woff?v=#{$font-awesome-version}') format('woff'), url('#{$font-awesome-path}/fontawesome-webfont.ttf?v=#{$font-awesome-version}') format('truetype'); font-weight: normal; font-style: normal; } /** ---------------------------------- Main Font Awesome styles. ---------------------------------- */ #{$font-awesome-class-selector} { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; /* Makes sure icons active on rollover in links. */ a & { display: inline-block; } &:before, &:before { text-decoration: inherit; display: inline-block; speak: none; } /* Bootstrap element reset styles. */ @if $font-awesome-using-bootstrap { /* Reset sprites.less */ 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; /* Button reset styles. */ .btn &, .nav & { display: inline; /* Keeps button heights with and without icons the same. */ &.icon-large { line-height: .9em; } &.icon-spin { display: inline-block; } } /* Nav reset styles. */ .nav-tabs &, .nav-pills & { /* Keeps button heights with and without icons the same. */ &.icon-large { line-height: .9em; } } /* Background image reset. */ .nav-pills > .active > a > &, .nav-pills > .active > a > &, .nav-list > .active > a > &, .nav-list > .active > a > &, .navbar-inverse .nav > .active > a > &, .navbar-inverse .nav > .active > a > &, .dropdown-menu > li > a:hover > &, .dropdown-menu > li > a:hover > &, .dropdown-menu > .active > a > &, .dropdown-menu > .active > a > &, .dropdown-submenu:hover > a > &, .dropdown-submenu:hover > a > & { background-image: none; } } } /* Icons within lists. */ ul { &.icons { list-style-type: none; text-indent: -.75em; li { #{$font-awesome-class-selector} { width: .75em; } } } } $font-awesome-list-selector: li; /* Build a selector to reset Bootstrap's .nav element. */ @if $font-awesome-using-bootstrap { $font-awesome-list-selector: append($font-awesome-list-selector, unquote('.nav li'), comma); } #{$font-awesome-list-selector} { #{$font-awesome-class-selector} { display: inline-block; width: 1.25em; text-align: center; } } /* Other Bootstrap sprites.less reset styles. */ @if $font-awesome-using-bootstrap { .icon-white { background-image: none; } } /** ---------------------------------- Misc. helper classes. ---------------------------------- */ .icon-muted { color: $font-awesome-icon-muted; } /* Makes the font 33% larger relative to the icon container. */ .icon-large:before { vertical-align: -10%; font-size: 1.3333333333333333em; } /** ---------------------------------- Bordered icons. ---------------------------------- */ @if $font-awesome-using-bordered { .icon-border { @include font-awesome-border-radius(3px); padding: .2em .25em .15em; border: solid 1px $font-awesome-border-color; } } /** ---------------------------------- Icon sizes. ---------------------------------- */ @if $font-awesome-icon-sizes { @each $size in $font-awesome-icon-sizes { // Convert the size to values with units. $em: $size * 1em; $px: $size * 1px; .icon-#{$size}x { font-size: $em; @if $font-awesome-using-bordered { &.icon-border { @include font-awesome-border-radius($px + 2); border-width: $px; } } } } } /** ---------------------------------- Float helpers. ---------------------------------- */ @if $font-awesome-using-floats { .pull-right { float: right; } .pull-left { float: left; } #{$font-awesome-class-selector} { &.pull-left { margin-right: .3em; } &.pull-right { margin-left: .3em; } } @if $font-awesome-using-bootstrap { .btn { #{$font-awesome-class-selector} { &.pull-left, &.pull-right { &.icon-2x { margin-top: .18em; } } &.icon-spin.icon-large { line-height: .8em; } } &.btn-small { #{$font-awesome-class-selector} { &.pull-left, &.pull-right { &.icon-2x { margin-top: .25em; } } } } &.btn-large { #{$font-awesome-class-selector} { // Overrides Bootstrap default. margin-top: 0; &.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 class. ---------------------------------- */ @if $font-awesome-using-spin { .#{$font-awesome-spin-class-name} { display: inline-block; -moz-animation: $font-awesome-spin-animation-name 2s infinite linear; -o-animation: $font-awesome-spin-animation-name 2s infinite linear; -webkit-animation: $font-awesome-spin-animation-name 2s infinite linear; animation: $font-awesome-spin-animation-name 2s infinite linear; } @-moz-keyframes $font-awesome-spin-animation-name { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes $font-awesome-spin-animation-name { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes $font-awesome-spin-animation-name { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @-ms-keyframes $font-awesome-spin-animation-name { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(359deg); } } @keyframes $font-awesome-spin-animation-name { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @-moz-document url-prefix() { .icon-#{$font-awesome-spin-class-name} { height: .9em; &.icon-large { height: 1.25em; } } .btn .icon-#{$font-awesome-spin-class-name} { height: auto; &.icon-large { height: .75em; } } } } /** ---------------------------------- Icon class names. Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons. ---------------------------------- */ $icons: 'glass' '\f000', 'music' '\f001', 'search' '\f002', 'envelope' '\f003', 'heart' '\f004', 'star' '\f005', 'star-empty' '\f006', 'user' '\f007', 'film' '\f008', 'th-large' '\f009', 'th' '\f00a', 'th-list' '\f00b', 'ok' '\f00c', 'remove' '\f00d', 'zoom-in' '\f00e', 'zoom-out' '\f010', 'off' '\f011', 'signal' '\f012', 'cog' '\f013', 'trash' '\f014', 'home' '\f015', 'file' '\f016', 'time' '\f017', 'road' '\f018', 'download-alt' '\f019', 'download' '\f01a', 'upload' '\f01b', 'inbox' '\f01c', 'play-circle' '\f01d', 'repeat' '\f01e', 'refresh' '\f021', 'list-alt' '\f022', 'lock' '\f023', 'flag' '\f024', 'headphones' '\f025', 'volume-off' '\f026', 'volume-down' '\f027', 'volume-up' '\f028', 'qrcode' '\f029', 'barcode' '\f02a', 'tag' '\f02b', 'tags' '\f02c', 'book' '\f02d', 'bookmark' '\f02e', 'print' '\f02f', 'camera' '\f030', 'font' '\f031', 'bold' '\f032', 'italic' '\f033', 'text-height' '\f034', 'text-width' '\f035', 'align-left' '\f036', 'align-center' '\f037', 'align-right' '\f038', 'align-justify' '\f039', 'list' '\f03a', 'indent-left' '\f03b', 'indent-right' '\f03c', 'facetime-video' '\f03d', 'picture' '\f03e', 'pencil' '\f040', 'map-marker' '\f041', 'adjust' '\f042', 'tint' '\f043', 'edit' '\f044', 'share' '\f045', 'check' '\f046', 'move' '\f047', 'step-backward' '\f048', 'fast-backward' '\f049', 'backward' '\f04a', 'play' '\f04b', 'pause' '\f04c', 'stop' '\f04d', 'forward' '\f04e', 'fast-forward' '\f050', 'step-forward' '\f051', 'eject' '\f052', 'chevron-left' '\f053', 'chevron-right' '\f054', 'plus-sign' '\f055', 'minus-sign' '\f056', 'remove-sign' '\f057', 'ok-sign' '\f058', 'question-sign' '\f059', 'info-sign' '\f05a', 'screenshot' '\f05b', 'remove-circle' '\f05c', 'ok-circle' '\f05d', 'ban-circle' '\f05e', 'arrow-left' '\f060', 'arrow-right' '\f061', 'arrow-up' '\f062', 'arrow-down' '\f063', 'share-alt' '\f064', 'resize-full' '\f065', 'resize-small' '\f066', 'plus' '\f067', 'minus' '\f068', 'asterisk' '\f069', 'exclamation-sign' '\f06a', 'gift' '\f06b', 'leaf' '\f06c', 'fire' '\f06d', 'eye-open' '\f06e', 'eye-close' '\f070', 'warning-sign' '\f071', 'plane' '\f072', 'calendar' '\f073', 'random' '\f074', 'comment' '\f075', 'magnet' '\f076', 'chevron-up' '\f077', 'chevron-down' '\f078', 'retweet' '\f079', 'shopping-cart' '\f07a', 'folder-close' '\f07b', 'folder-open' '\f07c', 'resize-vertical' '\f07d', 'resize-horizontal' '\f07e', 'bar-chart' '\f080', 'twitter-sign' '\f081', 'facebook-sign' '\f082', 'camera-retro' '\f083', 'key' '\f084', 'cogs' '\f085', 'comments' '\f086', 'thumbs-up' '\f087', 'thumbs-down' '\f088', 'star-half' '\f089', 'heart-empty' '\f08a', 'signout' '\f08b', 'linkedin-sign' '\f08c', 'pushpin' '\f08d', 'external-link' '\f08e', 'signin' '\f090', 'trophy' '\f091', 'github-sign' '\f092', 'upload-alt' '\f093', 'lemon' '\f094', 'phone' '\f095', 'check-empty' '\f096', 'bookmark-empty' '\f097', 'phone-sign' '\f098', 'twitter' '\f099', 'facebook' '\f09a', 'github' '\f09b', 'unlock' '\f09c', 'credit-card' '\f09d', 'rss' '\f09e', 'hdd' '\f0a0', 'bullhorn' '\f0a1', 'bell' '\f0a2', 'certificate' '\f0a3', 'hand-right' '\f0a4', 'hand-left' '\f0a5', 'hand-up' '\f0a6', 'hand-down' '\f0a7', 'circle-arrow-left' '\f0a8', 'circle-arrow-right' '\f0a9', 'circle-arrow-up' '\f0aa', 'circle-arrow-down' '\f0ab', 'globe' '\f0ac', 'wrench' '\f0ad', 'tasks' '\f0ae', 'filter' '\f0b0', 'briefcase' '\f0b1', 'fullscreen' '\f0b2', 'group' '\f0c0', 'link' '\f0c1', 'cloud' '\f0c2', 'beaker' '\f0c3', 'cut' '\f0c4', 'copy' '\f0c5', 'paper-clip' '\f0c6', 'save' '\f0c7', 'sign-blank' '\f0c8', 'reorder' '\f0c9', 'list-ul' '\f0ca', 'list-ol' '\f0cb', 'strikethrough' '\f0cc', 'underline' '\f0cd', 'table' '\f0ce', 'magic' '\f0d0', 'truck' '\f0d1', 'pinterest' '\f0d2', 'pinterest-sign' '\f0d3', 'google-plus-sign' '\f0d4', 'google-plus' '\f0d5', 'money' '\f0d6', 'caret-down' '\f0d7', 'caret-up' '\f0d8', 'caret-left' '\f0d9', 'caret-right' '\f0da', 'columns' '\f0db', 'sort' '\f0dc', 'sort-down' '\f0dd', 'sort-up' '\f0de', 'envelope-alt' '\f0e0', 'linkedin' '\f0e1', 'undo' '\f0e2', 'legal' '\f0e3', 'dashboard' '\f0e4', 'comment-alt' '\f0e5', 'comments-alt' '\f0e6', 'bolt' '\f0e7', 'sitemap' '\f0e8', 'umbrella' '\f0e9', 'paste' '\f0ea', 'lightbulb' '\f0eb', 'exchange' '\f0ec', 'cloud-download' '\f0ed', 'cloud-upload' '\f0ee', 'user-md' '\f0f0', 'stethoscope' '\f0f1', 'suitcase' '\f0f2', 'bell-alt' '\f0f3', 'coffee' '\f0f4', 'food' '\f0f5', 'file-alt' '\f0f6', 'building' '\f0f7', 'hospital' '\f0f8', 'ambulance' '\f0f9', 'medkit' '\f0fa', 'fighter-jet' '\f0fb', 'beer' '\f0fc', 'h-sign' '\f0fd', 'plus-sign-alt' '\f0fe', 'double-angle-left' '\f100', 'double-angle-right' '\f101', 'double-angle-up' '\f102', 'double-angle-down' '\f103', 'angle-left' '\f104', 'angle-right' '\f105', 'angle-up' '\f106', 'angle-down' '\f107', 'desktop' '\f108', 'laptop' '\f109', 'tablet' '\f10a', 'mobile-phone' '\f10b', 'circle-blank' '\f10c', 'quote-left' '\f10d', 'quote-right' '\f10e', 'spinner' '\f110', 'circle' '\f111', 'reply' '\f112', 'github-alt' '\f113', 'folder-close-alt' '\f114', 'folder-open-alt' '\f115'; /** ---------------------------------- Font Awesome output. ---------------------------------- */ @mixin output-font-awesome-classes() { @each $icon in $icons { $name: nth($icon, 1); $code: nth($icon, 2); .#{$font-awesome-class-prefix}#{$name}:before { content: $code; } } } @include output-font-awesome-classes;