Font-Awesome/sass/font-awesome.scss

/*! ----------------------------------

  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;