/* FONT AWESOME CORE * -------------------------- */ [class^="fa-"], [class*=" fa-"] { .icon-FontAwesome(); } [class^="fa-"]:before, [class*=" fa-"]:before { display: inline-block; text-decoration: inherit; speak: none; } /* makes the font 33% larger relative to the icon container */ .fa-large:before { font-size: (4em / 3); vertical-align: -10%; } /* makes sure icons active on rollover in links */ a { [class^="fa-"], [class*=" fa-"] { display: inline; } } /* increased font size for icon-large */ [class^="fa-"], [class*=" fa-"] { &.fa-fixed-width { display: inline-block; width: (16em / 14); padding-right: (4em / 14); text-align: right; &.fa-large { width: (20em / 14); } } } .fas-ul { padding-left: 0; margin-left: @icons-li-width; list-style-type: none; > li { position: relative; } .fa-li { position: absolute; left: -@icons-li-width; width: @icons-li-width; line-height: inherit; text-align: center; } } // allows usage of the hide class directly on font awesome icons [class^="fa-"], [class*=" fa-"] { &.hide { display: none; } } .fa-muted { color: @iconMuted; } .fa-light { color: @iconLight; } .fa-dark { color: @iconDark; } // Icon Borders // ------------------------- .fa-border { padding: .2em .25em .15em; border: solid 1px @borderColor; .border-radius(3px); } // Icon Sizes // ------------------------- .fa-2x { font-size: 2em; &.fa-border { border-width: 2px; .border-radius(4px); } } .fa-3x { font-size: 3em; &.fa-border { border-width: 3px; .border-radius(5px); } } .fa-4x { font-size: 4em; &.fa-border { border-width: 4px; .border-radius(6px); } } .fa-5x { font-size: 5em; &.fa-border { border-width: 5px; .border-radius(7px); } } // Floats & Margins // ------------------------- // Quick floats .pull-right { float: right; } .pull-left { float: left; } [class^="fa-"], [class*=" fa-"] { &.pull-left { margin-right: .3em; } &.pull-right { margin-left: .3em; } }