Created
August 30, 2012 04:04
-
-
Save svallory/3522214 to your computer and use it in GitHub Desktop.
FonAwesome Icons using Mixins instead of classes (Please see the first comment)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Font Awesome | |
| 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 webfont, CSS, and LESS files are licensed under CC BY 3.0: | |
| http://creativecommons.org/licenses/by/3.0/ A mention of | |
| 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable | |
| source code is considered acceptable attribution (most common on the web). | |
| If human readable source code is not available to the end user, a mention in | |
| an 'About' or 'Credits' screen is considered acceptable (most common in desktop | |
| or mobile software). | |
| Contact | |
| ------------------------------------------------------- | |
| Email: dave@davegandy.com | |
| Twitter: http://twitter.com/fortaweso_me | |
| Work: Lead Product Designer @ http://kyruus.com | |
| */ | |
| @fontAwesomePath: '../font'; | |
| @font-face { | |
| font-family: 'FontAwesome'; | |
| src: url('@{fontAwesomePath}/fontawesome-webfont.eot'); | |
| src: url('@{fontAwesomePath}/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('@{fontAwesomePath}/fontawesome-webfont.woff') format('woff'), | |
| url('@{fontAwesomePath}/fontawesome-webfont.ttf') format('truetype'), | |
| url('@{fontAwesomePath}/fontawesome-webfont.svg#FontAwesome') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* Font Awesome styles | |
| ------------------------------------------------------- */ | |
| .icon() { | |
| &:before { | |
| font-family: FontAwesome; | |
| font-weight: normal; | |
| font-style: normal; | |
| display: inline-block; | |
| text-decoration: inherit; | |
| // TODO: Check if the following line causes any trouble. (it was applied only for icons inside buttons) | |
| line-height: .9em; | |
| } | |
| } | |
| [class^="icon"]:before, | |
| [class*=" icon"]:before { | |
| .icon; | |
| } | |
| a [class^="icon"], | |
| a [class*=" icon"] { | |
| display: inline-block; | |
| text-decoration: inherit; | |
| } | |
| /* makes the font 33% larger relative to the icon container */ | |
| .icon-large() { | |
| &:before { | |
| vertical-align: middle; | |
| font-size: 4/3em; | |
| } | |
| } | |
| .btn, .nav-tabs { | |
| [class^="icon"], | |
| [class*=" icon"] { | |
| /* keeps button heights with and without icons the same */ | |
| line-height: .9em; | |
| } | |
| } | |
| /**************************************************** | |
| /* This is where the trouble begins | |
| /**************************************************** | |
| li { | |
| [class^="icon"], | |
| [class*=" icon"] { | |
| display: inline-block; | |
| width: 1.25em; | |
| text-align: center; | |
| } | |
| /* Why there are two identical selectors here? */ | |
| .icon-large:before, | |
| .icon-large:before { | |
| /* 1.5 increased font size for icon-large * 1.25 width */ | |
| width: 1.5*1.25em; | |
| } | |
| } | |
| ul.icons { | |
| list-style-type: none; | |
| margin-left: 2em; | |
| text-indent: -.8em; | |
| li { | |
| [class^="icon"], | |
| [class*=" icon"] { | |
| width: .8em; | |
| } | |
| .icon-large:before, | |
| .icon-large:before { | |
| /* 1.5 increased font size for icon-large * 1.25 width */ | |
| vertical-align: initial; | |
| // width: 1.5*1.25em; | |
| } | |
| } | |
| } | |
| /**************************************************** | |
| /* Trouble ends here | |
| /**************************************************** | |
| /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen | |
| readers do not read off random characters that represent icons */ | |
| .icon-glass() { .icon; &:before { content: "\f000"; }} | |
| .icon-music() { .icon; &:before { content: "\f001"; }} | |
| .icon-search() { .icon; &:before { content: "\f002"; }} | |
| .icon-envelope() { .icon; &:before { content: "\f003"; }} | |
| .icon-heart() { .icon; &:before { content: "\f004"; }} | |
| .icon-star() { .icon; &:before { content: "\f005"; }} | |
| .icon-star-empty() { .icon; &:before { content: "\f006"; }} | |
| .icon-user() { .icon; &:before { content: "\f007"; }} | |
| .icon-film() { .icon; &:before { content: "\f008"; }} | |
| .icon-th-large() { .icon; &:before { content: "\f009"; }} | |
| .icon-th() { .icon; &:before { content: "\f00a"; }} | |
| .icon-th-list() { .icon; &:before { content: "\f00b"; }} | |
| .icon-ok() { .icon; &:before { content: "\f00c"; }} | |
| .icon-remove() { .icon; &:before { content: "\f00d"; }} | |
| .icon-zoom-in() { .icon; &:before { content: "\f00e"; }} | |
| .icon-zoom-out() { .icon; &:before { content: "\f010"; }} | |
| .icon-off() { .icon; &:before { content: "\f011"; }} | |
| .icon-signal() { .icon; &:before { content: "\f012"; }} | |
| .icon-cog() { .icon; &:before { content: "\f013"; }} | |
| .icon-trash() { .icon; &:before { content: "\f014"; }} | |
| .icon-home() { .icon; &:before { content: "\f015"; }} | |
| .icon-file() { .icon; &:before { content: "\f016"; }} | |
| .icon-time() { .icon; &:before { content: "\f017"; }} | |
| .icon-road() { .icon; &:before { content: "\f018"; }} | |
| .icon-download-alt() { .icon; &:before { content: "\f019"; }} | |
| .icon-download() { .icon; &:before { content: "\f01a"; }} | |
| .icon-upload() { .icon; &:before { content: "\f01b"; }} | |
| .icon-inbox() { .icon; &:before { content: "\f01c"; }} | |
| .icon-play-circle() { .icon; &:before { content: "\f01d"; }} | |
| .icon-repeat() { .icon; &:before { content: "\f01e"; }} | |
| /* \f020 doesn't work in Safari. all shifted one down */ | |
| .icon-refresh() { .icon; &:before { content: "\f021"; }} | |
| .icon-list-alt() { .icon; &:before { content: "\f022"; }} | |
| .icon-lock() { .icon; &:before { content: "\f023"; }} | |
| .icon-flag() { .icon; &:before { content: "\f024"; }} | |
| .icon-headphones() { .icon; &:before { content: "\f025"; }} | |
| .icon-volume-off() { .icon; &:before { content: "\f026"; }} | |
| .icon-volume-down() { .icon; &:before { content: "\f027"; }} | |
| .icon-volume-up() { .icon; &:before { content: "\f028"; }} | |
| .icon-qrcode() { .icon; &:before { content: "\f029"; }} | |
| .icon-barcode() { .icon; &:before { content: "\f02a"; }} | |
| .icon-tag() { .icon; &:before { content: "\f02b"; }} | |
| .icon-tags() { .icon; &:before { content: "\f02c"; }} | |
| .icon-book() { .icon; &:before { content: "\f02d"; }} | |
| .icon-bookmark() { .icon; &:before { content: "\f02e"; }} | |
| .icon-print() { .icon; &:before { content: "\f02f"; }} | |
| .icon-camera() { .icon; &:before { content: "\f030"; }} | |
| .icon-font() { .icon; &:before { content: "\f031"; }} | |
| .icon-bold() { .icon; &:before { content: "\f032"; }} | |
| .icon-italic() { .icon; &:before { content: "\f033"; }} | |
| .icon-text-height() { .icon; &:before { content: "\f034"; }} | |
| .icon-text-width() { .icon; &:before { content: "\f035"; }} | |
| .icon-align-left() { .icon; &:before { content: "\f036"; }} | |
| .icon-align-center() { .icon; &:before { content: "\f037"; }} | |
| .icon-align-right() { .icon; &:before { content: "\f038"; }} | |
| .icon-align-justify() { .icon; &:before { content: "\f039"; }} | |
| .icon-list() { .icon; &:before { content: "\f03a"; }} | |
| .icon-indent-left() { .icon; &:before { content: "\f03b"; }} | |
| .icon-indent-right() { .icon; &:before { content: "\f03c"; }} | |
| .icon-facetime-video() { .icon; &:before { content: "\f03d"; }} | |
| .icon-picture() { .icon; &:before { content: "\f03e"; }} | |
| .icon-pencil() { .icon; &:before { content: "\f040"; }} | |
| .icon-map-marker() { .icon; &:before { content: "\f041"; }} | |
| .icon-adjust() { .icon; &:before { content: "\f042"; }} | |
| .icon-tint() { .icon; &:before { content: "\f043"; }} | |
| .icon-edit() { .icon; &:before { content: "\f044"; }} | |
| .icon-share() { .icon; &:before { content: "\f045"; }} | |
| .icon-check() { .icon; &:before { content: "\f046"; }} | |
| .icon-move() { .icon; &:before { content: "\f047"; }} | |
| .icon-step-backward() { .icon; &:before { content: "\f048"; }} | |
| .icon-fast-backward() { .icon; &:before { content: "\f049"; }} | |
| .icon-backward() { .icon; &:before { content: "\f04a"; }} | |
| .icon-play() { .icon; &:before { content: "\f04b"; }} | |
| .icon-pause() { .icon; &:before { content: "\f04c"; }} | |
| .icon-stop() { .icon; &:before { content: "\f04d"; }} | |
| .icon-forward() { .icon; &:before { content: "\f04e"; }} | |
| .icon-fast-forward() { .icon; &:before { content: "\f050"; }} | |
| .icon-step-forward() { .icon; &:before { content: "\f051"; }} | |
| .icon-eject() { .icon; &:before { content: "\f052"; }} | |
| .icon-chevron-left() { .icon; &:before { content: "\f053"; }} | |
| .icon-chevron-right() { .icon; &:before { content: "\f054"; }} | |
| .icon-plus-sign() { .icon; &:before { content: "\f055"; }} | |
| .icon-minus-sign() { .icon; &:before { content: "\f056"; }} | |
| .icon-remove-sign() { .icon; &:before { content: "\f057"; }} | |
| .icon-ok-sign() { .icon; &:before { content: "\f058"; }} | |
| .icon-question-sign() { .icon; &:before { content: "\f059"; }} | |
| .icon-info-sign() { .icon; &:before { content: "\f05a"; }} | |
| .icon-screenshot() { .icon; &:before { content: "\f05b"; }} | |
| .icon-remove-circle() { .icon; &:before { content: "\f05c"; }} | |
| .icon-ok-circle() { .icon; &:before { content: "\f05d"; }} | |
| .icon-ban-circle() { .icon; &:before { content: "\f05e"; }} | |
| .icon-arrow-left() { .icon; &:before { content: "\f060"; }} | |
| .icon-arrow-right() { .icon; &:before { content: "\f061"; }} | |
| .icon-arrow-up() { .icon; &:before { content: "\f062"; }} | |
| .icon-arrow-down() { .icon; &:before { content: "\f063"; }} | |
| .icon-share-alt() { .icon; &:before { content: "\f064"; }} | |
| .icon-resize-full() { .icon; &:before { content: "\f065"; }} | |
| .icon-resize-small() { .icon; &:before { content: "\f066"; }} | |
| .icon-plus() { .icon; &:before { content: "\f067"; }} | |
| .icon-minus() { .icon; &:before { content: "\f068"; }} | |
| .icon-asterisk() { .icon; &:before { content: "\f069"; }} | |
| .icon-exclamation-sign() { .icon; &:before { content: "\f06a"; }} | |
| .icon-gift() { .icon; &:before { content: "\f06b"; }} | |
| .icon-leaf() { .icon; &:before { content: "\f06c"; }} | |
| .icon-fire() { .icon; &:before { content: "\f06d"; }} | |
| .icon-eye-open() { .icon; &:before { content: "\f06e"; }} | |
| .icon-eye-close() { .icon; &:before { content: "\f070"; }} | |
| .icon-warning-sign() { .icon; &:before { content: "\f071"; }} | |
| .icon-plane() { .icon; &:before { content: "\f072"; }} | |
| .icon-calendar() { .icon; &:before { content: "\f073"; }} | |
| .icon-random() { .icon; &:before { content: "\f074"; }} | |
| .icon-comment() { .icon; &:before { content: "\f075"; }} | |
| .icon-magnet() { .icon; &:before { content: "\f076"; }} | |
| .icon-chevron-up() { .icon; &:before { content: "\f077"; }} | |
| .icon-chevron-down() { .icon; &:before { content: "\f078"; }} | |
| .icon-retweet() { .icon; &:before { content: "\f079"; }} | |
| .icon-shopping-cart() { .icon; &:before { content: "\f07a"; }} | |
| .icon-folder-close() { .icon; &:before { content: "\f07b"; }} | |
| .icon-folder-open() { .icon; &:before { content: "\f07c"; }} | |
| .icon-resize-vertical() { .icon; &:before { content: "\f07d"; }} | |
| .icon-resize-horizontal() { .icon; &:before { content: "\f07e"; }} | |
| .icon-bar-chart() { .icon; &:before { content: "\f080"; }} | |
| .icon-twitter-sign() { .icon; &:before { content: "\f081"; }} | |
| .icon-facebook-sign() { .icon; &:before { content: "\f082"; }} | |
| .icon-camera-retro() { .icon; &:before { content: "\f083"; }} | |
| .icon-key() { .icon; &:before { content: "\f084"; }} | |
| .icon-cogs() { .icon; &:before { content: "\f085"; }} | |
| .icon-comments() { .icon; &:before { content: "\f086"; }} | |
| .icon-thumbs-up() { .icon; &:before { content: "\f087"; }} | |
| .icon-thumbs-down() { .icon; &:before { content: "\f088"; }} | |
| .icon-star-half() { .icon; &:before { content: "\f089"; }} | |
| .icon-heart-empty() { .icon; &:before { content: "\f08a"; }} | |
| .icon-signout() { .icon; &:before { content: "\f08b"; }} | |
| .icon-linkedin-sign() { .icon; &:before { content: "\f08c"; }} | |
| .icon-pushpin() { .icon; &:before { content: "\f08d"; }} | |
| .icon-external-link() { .icon; &:before { content: "\f08e"; }} | |
| .icon-signin() { .icon; &:before { content: "\f090"; }} | |
| .icon-trophy() { .icon; &:before { content: "\f091"; }} | |
| .icon-github-sign() { .icon; &:before { content: "\f092"; }} | |
| .icon-upload-alt() { .icon; &:before { content: "\f093"; }} | |
| .icon-lemon() { .icon; &:before { content: "\f094"; }} | |
| .icon-phone() { .icon; &:before { content: "\f095"; }} | |
| .icon-check-empty() { .icon; &:before { content: "\f096"; }} | |
| .icon-bookmark-empty() { .icon; &:before { content: "\f097"; }} | |
| .icon-phone-sign() { .icon; &:before { content: "\f098"; }} | |
| .icon-twitter() { .icon; &:before { content: "\f099"; }} | |
| .icon-facebook() { .icon; &:before { content: "\f09a"; }} | |
| .icon-github() { .icon; &:before { content: "\f09b"; }} | |
| .icon-unlock() { .icon; &:before { content: "\f09c"; }} | |
| .icon-credit-card() { .icon; &:before { content: "\f09d"; }} | |
| .icon-rss() { .icon; &:before { content: "\f09e"; }} | |
| .icon-hdd() { .icon; &:before { content: "\f0a0"; }} | |
| .icon-bullhorn() { .icon; &:before { content: "\f0a1"; }} | |
| .icon-bell() { .icon; &:before { content: "\f0a2"; }} | |
| .icon-certificate() { .icon; &:before { content: "\f0a3"; }} | |
| .icon-hand-right() { .icon; &:before { content: "\f0a4"; }} | |
| .icon-hand-left() { .icon; &:before { content: "\f0a5"; }} | |
| .icon-hand-up() { .icon; &:before { content: "\f0a6"; }} | |
| .icon-hand-down() { .icon; &:before { content: "\f0a7"; }} | |
| .icon-circle-arrow-left() { .icon; &:before { content: "\f0a8"; }} | |
| .icon-circle-arrow-right() { .icon; &:before { content: "\f0a9"; }} | |
| .icon-circle-arrow-up() { .icon; &:before { content: "\f0aa"; }} | |
| .icon-circle-arrow-down() { .icon; &:before { content: "\f0ab"; }} | |
| .icon-globe() { .icon; &:before { content: "\f0ac"; }} | |
| .icon-wrench() { .icon; &:before { content: "\f0ad"; }} | |
| .icon-tasks() { .icon; &:before { content: "\f0ae"; }} | |
| .icon-filter() { .icon; &:before { content: "\f0b0"; }} | |
| .icon-briefcase() { .icon; &:before { content: "\f0b1"; }} | |
| .icon-fullscreen() { .icon; &:before { content: "\f0b2"; }} | |
| .icon-group() { .icon; &:before { content: "\f0c0"; }} | |
| .icon-link() { .icon; &:before { content: "\f0c1"; }} | |
| .icon-cloud() { .icon; &:before { content: "\f0c2"; }} | |
| .icon-beaker() { .icon; &:before { content: "\f0c3"; }} | |
| .icon-cut() { .icon; &:before { content: "\f0c4"; }} | |
| .icon-copy() { .icon; &:before { content: "\f0c5"; }} | |
| .icon-paper-clip() { .icon; &:before { content: "\f0c6"; }} | |
| .icon-save() { .icon; &:before { content: "\f0c7"; }} | |
| .icon-sign-blank() { .icon; &:before { content: "\f0c8"; }} | |
| .icon-reorder() { .icon; &:before { content: "\f0c9"; }} | |
| .icon-list-ul() { .icon; &:before { content: "\f0ca"; }} | |
| .icon-list-ol() { .icon; &:before { content: "\f0cb"; }} | |
| .icon-strikethrough() { .icon; &:before { content: "\f0cc"; }} | |
| .icon-underline() { .icon; &:before { content: "\f0cd"; }} | |
| .icon-table() { .icon; &:before { content: "\f0ce"; }} | |
| .icon-magic() { .icon; &:before { content: "\f0d0"; }} | |
| .icon-truck() { .icon; &:before { content: "\f0d1"; }} | |
| .icon-pinterest() { .icon; &:before { content: "\f0d2"; }} | |
| .icon-pinterest-sign() { .icon; &:before { content: "\f0d3"; }} | |
| .icon-google-plus-sign() { .icon; &:before { content: "\f0d4"; }} | |
| .icon-google-plus() { .icon; &:before { content: "\f0d5"; }} | |
| .icon-money() { .icon; &:before { content: "\f0d6"; }} | |
| .icon-caret-down() { .icon; &:before { content: "\f0d7"; }} | |
| .icon-caret-up() { .icon; &:before { content: "\f0d8"; }} | |
| .icon-caret-left() { .icon; &:before { content: "\f0d9"; }} | |
| .icon-caret-right() { .icon; &:before { content: "\f0da"; }} | |
| .icon-columns() { .icon; &:before { content: "\f0db"; }} | |
| .icon-sort() { .icon; &:before { content: "\f0dc"; }} | |
| .icon-sort-down() { .icon; &:before { content: "\f0dd"; }} | |
| .icon-sort-up() { .icon; &:before { content: "\f0de"; }} | |
| .icon-envelope-alt() { .icon; &:before { content: "\f0e0"; }} | |
| .icon-linkedin() { .icon; &:before { content: "\f0e1"; }} | |
| .icon-undo() { .icon; &:before { content: "\f0e2"; }} | |
| .icon-legal() { .icon; &:before { content: "\f0e3"; }} | |
| .icon-dashboard() { .icon; &:before { content: "\f0e4"; }} | |
| .icon-comment-alt() { .icon; &:before { content: "\f0e5"; }} | |
| .icon-comments-alt() { .icon; &:before { content: "\f0e6"; }} | |
| .icon-bolt() { .icon; &:before { content: "\f0e7"; }} | |
| .icon-sitemap() { .icon; &:before { content: "\f0e8"; }} | |
| .icon-umbrella() { .icon; &:before { content: "\f0e9"; }} | |
| .icon-paste() { .icon; &:before { content: "\f0ea"; }} | |
| .icon-user-md() { .icon; &:before { content: "\f200"; }} |
** REPOST **
The objective is to make the entire css applicable through mixins. Most of the time this will make the final css smaller (since we'll have 348 lines less). But more importantly, makes your layout more easy to maitain. There is one part I couldn't transform. It's marked with comments on the file. For now, you need to use the class "icon-large" and manually set width for icons on "li" tags.
Example:
.html
<a href="#" class="btn linkbutton">Link button with icon</a>.less
.linkbutton {
.icon-upload;
}
To avoid writing the \f200 you could use @fa-var-user-md.
Here is the definition of the icons:
.icon-glass() { .icon; &:before { content: @fa-var-glass; }}
.icon-music() { .icon; &:before { content: @fa-var-music; }}
.icon-search() { .icon; &:before { content: @fa-var-search; }}
.icon-envelope() { .icon; &:before { content: @fa-var-envelope; }}
.icon-heart() { .icon; &:before { content: @fa-var-heart; }}
.icon-star() { .icon; &:before { content: @fa-var-star; }}
.icon-star-empty() { .icon; &:before { content: @fa-var-star-empty; }}
.icon-user() { .icon; &:before { content: @fa-var-user; }}
.icon-film() { .icon; &:before { content: @fa-var-film; }}
.icon-th-large() { .icon; &:before { content: @fa-var-th-large; }}
.icon-th() { .icon; &:before { content: @fa-var-th; }}
.icon-th-list() { .icon; &:before { content: @fa-var-th-list; }}
.icon-ok() { .icon; &:before { content: @fa-var-ok; }}
.icon-remove() { .icon; &:before { content: @fa-var-remove; }}
.icon-zoom-in() { .icon; &:before { content: @fa-var-zoom-in; }}
.icon-zoom-out() { .icon; &:before { content: @fa-var-zoom-out; }}
.icon-off() { .icon; &:before { content: @fa-var-off; }}
.icon-signal() { .icon; &:before { content: @fa-var-signal; }}
.icon-cog() { .icon; &:before { content: @fa-var-cog; }}
.icon-trash() { .icon; &:before { content: @fa-var-trash; }}
.icon-home() { .icon; &:before { content: @fa-var-home; }}
.icon-file() { .icon; &:before { content: @fa-var-file; }}
.icon-time() { .icon; &:before { content: @fa-var-time; }}
.icon-road() { .icon; &:before { content: @fa-var-road; }}
.icon-download-alt() { .icon; &:before { content: @fa-var-download-alt; }}
.icon-download() { .icon; &:before { content: @fa-var-download; }}
.icon-upload() { .icon; &:before { content: @fa-var-upload; }}
.icon-inbox() { .icon; &:before { content: @fa-var-inbox; }}
.icon-play-circle() { .icon; &:before { content: @fa-var-play-circle; }}
.icon-repeat() { .icon; &:before { content: @fa-var-repeat; }}
/* \f020 doesn't work in Safari. all shifted one down */
.icon-refresh() { .icon; &:before { content: @fa-var-refresh; }}
.icon-list-alt() { .icon; &:before { content: @fa-var-list-alt; }}
.icon-lock() { .icon; &:before { content: @fa-var-lock; }}
.icon-flag() { .icon; &:before { content: @fa-var-flag; }}
.icon-headphones() { .icon; &:before { content: @fa-var-headphones; }}
.icon-volume-off() { .icon; &:before { content: @fa-var-volume-off; }}
.icon-volume-down() { .icon; &:before { content: @fa-var-volume-down; }}
.icon-volume-up() { .icon; &:before { content: @fa-var-volume-up; }}
.icon-qrcode() { .icon; &:before { content: @fa-var-qrcode; }}
.icon-barcode() { .icon; &:before { content: @fa-var-barcode; }}
.icon-tag() { .icon; &:before { content: @fa-var-tag; }}
.icon-tags() { .icon; &:before { content: @fa-var-tags; }}
.icon-book() { .icon; &:before { content: @fa-var-book; }}
.icon-bookmark() { .icon; &:before { content: @fa-var-bookmark; }}
.icon-print() { .icon; &:before { content: @fa-var-print; }}
.icon-camera() { .icon; &:before { content: @fa-var-camera; }}
.icon-font() { .icon; &:before { content: @fa-var-font; }}
.icon-bold() { .icon; &:before { content: @fa-var-bold; }}
.icon-italic() { .icon; &:before { content: @fa-var-italic; }}
.icon-text-height() { .icon; &:before { content: @fa-var-text-height; }}
.icon-text-width() { .icon; &:before { content: @fa-var-text-width; }}
.icon-align-left() { .icon; &:before { content: @fa-var-align-left; }}
.icon-align-center() { .icon; &:before { content: @fa-var-align-center; }}
.icon-align-right() { .icon; &:before { content: @fa-var-align-right; }}
.icon-align-justify() { .icon; &:before { content: @fa-var-align-justify; }}
.icon-list() { .icon; &:before { content: @fa-var-list; }}
.icon-indent-left() { .icon; &:before { content: @fa-var-indent-left; }}
.icon-indent-right() { .icon; &:before { content: @fa-var-indent-right; }}
.icon-facetime-video() { .icon; &:before { content: @fa-var-facetime-video; }}
.icon-picture() { .icon; &:before { content: @fa-var-picture; }}
.icon-pencil() { .icon; &:before { content: @fa-var-pencil; }}
.icon-map-marker() { .icon; &:before { content: @fa-var-map-marker; }}
.icon-adjust() { .icon; &:before { content: @fa-var-adjust; }}
.icon-tint() { .icon; &:before { content: @fa-var-tint; }}
.icon-edit() { .icon; &:before { content: @fa-var-edit; }}
.icon-share() { .icon; &:before { content: @fa-var-share; }}
.icon-check() { .icon; &:before { content: @fa-var-check; }}
.icon-move() { .icon; &:before { content: @fa-var-move; }}
.icon-step-backward() { .icon; &:before { content: @fa-var-step-backward; }}
.icon-fast-backward() { .icon; &:before { content: @fa-var-fast-backward; }}
.icon-backward() { .icon; &:before { content: @fa-var-backward; }}
.icon-play() { .icon; &:before { content: @fa-var-play; }}
.icon-pause() { .icon; &:before { content: @fa-var-pause; }}
.icon-stop() { .icon; &:before { content: @fa-var-stop; }}
.icon-forward() { .icon; &:before { content: @fa-var-forward; }}
.icon-fast-forward() { .icon; &:before { content: @fa-var-fast-forward; }}
.icon-step-forward() { .icon; &:before { content: @fa-var-step-forward; }}
.icon-eject() { .icon; &:before { content: @fa-var-eject; }}
.icon-chevron-left() { .icon; &:before { content: @fa-var-chevron-left; }}
.icon-chevron-right() { .icon; &:before { content: @fa-var-chevron-right; }}
.icon-plus-sign() { .icon; &:before { content: @fa-var-plus-sign; }}
.icon-minus-sign() { .icon; &:before { content: @fa-var-minus-sign; }}
.icon-remove-sign() { .icon; &:before { content: @fa-var-remove-sign; }}
.icon-ok-sign() { .icon; &:before { content: @fa-var-ok-sign; }}
.icon-question-sign() { .icon; &:before { content: @fa-var-question-sign; }}
.icon-info-sign() { .icon; &:before { content: @fa-var-info-sign; }}
.icon-screenshot() { .icon; &:before { content: @fa-var-screenshot; }}
.icon-remove-circle() { .icon; &:before { content: @fa-var-remove-circle; }}
.icon-ok-circle() { .icon; &:before { content: @fa-var-ok-circle; }}
.icon-ban-circle() { .icon; &:before { content: @fa-var-ban-circle; }}
.icon-arrow-left() { .icon; &:before { content: @fa-var-arrow-left; }}
.icon-arrow-right() { .icon; &:before { content: @fa-var-arrow-right; }}
.icon-arrow-up() { .icon; &:before { content: @fa-var-arrow-up; }}
.icon-arrow-down() { .icon; &:before { content: @fa-var-arrow-down; }}
.icon-share-alt() { .icon; &:before { content: @fa-var-share-alt; }}
.icon-resize-full() { .icon; &:before { content: @fa-var-resize-full; }}
.icon-resize-small() { .icon; &:before { content: @fa-var-resize-small; }}
.icon-plus() { .icon; &:before { content: @fa-var-plus; }}
.icon-minus() { .icon; &:before { content: @fa-var-minus; }}
.icon-asterisk() { .icon; &:before { content: @fa-var-asterisk; }}
.icon-exclamation-sign() { .icon; &:before { content: @fa-var-exclamation-sign; }}
.icon-gift() { .icon; &:before { content: @fa-var-gift; }}
.icon-leaf() { .icon; &:before { content: @fa-var-leaf; }}
.icon-fire() { .icon; &:before { content: @fa-var-fire; }}
.icon-eye-open() { .icon; &:before { content: @fa-var-eye-open; }}
.icon-eye-close() { .icon; &:before { content: @fa-var-eye-close; }}
.icon-warning-sign() { .icon; &:before { content: @fa-var-warning-sign; }}
.icon-plane() { .icon; &:before { content: @fa-var-plane; }}
.icon-calendar() { .icon; &:before { content: @fa-var-calendar; }}
.icon-random() { .icon; &:before { content: @fa-var-random; }}
.icon-comment() { .icon; &:before { content: @fa-var-comment; }}
.icon-magnet() { .icon; &:before { content: @fa-var-magnet; }}
.icon-chevron-up() { .icon; &:before { content: @fa-var-chevron-up; }}
.icon-chevron-down() { .icon; &:before { content: @fa-var-chevron-down; }}
.icon-retweet() { .icon; &:before { content: @fa-var-retweet; }}
.icon-shopping-cart() { .icon; &:before { content: @fa-var-shopping-cart; }}
.icon-folder-close() { .icon; &:before { content: @fa-var-folder-close; }}
.icon-folder-open() { .icon; &:before { content: @fa-var-folder-open; }}
.icon-resize-vertical() { .icon; &:before { content: @fa-var-resize-vertical; }}
.icon-resize-horizontal() { .icon; &:before { content: @fa-var-resize-horizontal; }}
.icon-bar-chart() { .icon; &:before { content: @fa-var-bar-chart; }}
.icon-twitter-sign() { .icon; &:before { content: @fa-var-twitter-sign; }}
.icon-facebook-sign() { .icon; &:before { content: @fa-var-facebook-sign; }}
.icon-camera-retro() { .icon; &:before { content: @fa-var-camera-retro; }}
.icon-key() { .icon; &:before { content: @fa-var-key; }}
.icon-cogs() { .icon; &:before { content: @fa-var-cogs; }}
.icon-comments() { .icon; &:before { content: @fa-var-comments; }}
.icon-thumbs-up() { .icon; &:before { content: @fa-var-thumbs-up; }}
.icon-thumbs-down() { .icon; &:before { content: @fa-var-thumbs-down; }}
.icon-star-half() { .icon; &:before { content: @fa-var-star-half; }}
.icon-heart-empty() { .icon; &:before { content: @fa-var-heart-empty; }}
.icon-signout() { .icon; &:before { content: @fa-var-signout; }}
.icon-linkedin-sign() { .icon; &:before { content: @fa-var-linkedin-sign; }}
.icon-pushpin() { .icon; &:before { content: @fa-var-pushpin; }}
.icon-external-link() { .icon; &:before { content: @fa-var-external-link; }}
.icon-signin() { .icon; &:before { content: @fa-var-signin; }}
.icon-trophy() { .icon; &:before { content: @fa-var-trophy; }}
.icon-github-sign() { .icon; &:before { content: @fa-var-github-sign; }}
.icon-upload-alt() { .icon; &:before { content: @fa-var-upload-alt; }}
.icon-lemon() { .icon; &:before { content: @fa-var-lemon; }}
.icon-phone() { .icon; &:before { content: @fa-var-phone; }}
.icon-check-empty() { .icon; &:before { content: @fa-var-check-empty; }}
.icon-bookmark-empty() { .icon; &:before { content: @fa-var-bookmark-empty; }}
.icon-phone-sign() { .icon; &:before { content: @fa-var-phone-sign; }}
.icon-twitter() { .icon; &:before { content: @fa-var-twitter; }}
.icon-facebook() { .icon; &:before { content: @fa-var-facebook; }}
.icon-github() { .icon; &:before { content: @fa-var-github; }}
.icon-unlock() { .icon; &:before { content: @fa-var-unlock; }}
.icon-credit-card() { .icon; &:before { content: @fa-var-credit-card; }}
.icon-rss() { .icon; &:before { content: @fa-var-rss; }}
.icon-hdd() { .icon; &:before { content: @fa-var-hdd; }}
.icon-bullhorn() { .icon; &:before { content: @fa-var-bullhorn; }}
.icon-bell() { .icon; &:before { content: @fa-var-bell; }}
.icon-certificate() { .icon; &:before { content: @fa-var-certificate; }}
.icon-hand-right() { .icon; &:before { content: @fa-var-hand-right; }}
.icon-hand-left() { .icon; &:before { content: @fa-var-hand-left; }}
.icon-hand-up() { .icon; &:before { content: @fa-var-hand-up; }}
.icon-hand-down() { .icon; &:before { content: @fa-var-hand-down; }}
.icon-circle-arrow-left() { .icon; &:before { content: @fa-var-circle-arrow-left; }}
.icon-circle-arrow-right() { .icon; &:before { content: @fa-var-circle-arrow-right; }}
.icon-circle-arrow-up() { .icon; &:before { content: @fa-var-circle-arrow-up; }}
.icon-circle-arrow-down() { .icon; &:before { content: @fa-var-circle-arrow-down; }}
.icon-globe() { .icon; &:before { content: @fa-var-globe; }}
.icon-wrench() { .icon; &:before { content: @fa-var-wrench; }}
.icon-tasks() { .icon; &:before { content: @fa-var-tasks; }}
.icon-filter() { .icon; &:before { content: @fa-var-filter; }}
.icon-briefcase() { .icon; &:before { content: @fa-var-briefcase; }}
.icon-fullscreen() { .icon; &:before { content: @fa-var-fullscreen; }}
.icon-group() { .icon; &:before { content: @fa-var-group; }}
.icon-link() { .icon; &:before { content: @fa-var-link; }}
.icon-cloud() { .icon; &:before { content: @fa-var-cloud; }}
.icon-beaker() { .icon; &:before { content: @fa-var-beaker; }}
.icon-cut() { .icon; &:before { content: @fa-var-cut; }}
.icon-copy() { .icon; &:before { content: @fa-var-copy; }}
.icon-paper-clip() { .icon; &:before { content: @fa-var-paper-clip; }}
.icon-save() { .icon; &:before { content: @fa-var-save; }}
.icon-sign-blank() { .icon; &:before { content: @fa-var-sign-blank; }}
.icon-reorder() { .icon; &:before { content: @fa-var-reorder; }}
.icon-list-ul() { .icon; &:before { content: @fa-var-list-ul; }}
.icon-list-ol() { .icon; &:before { content: @fa-var-list-ol; }}
.icon-strikethrough() { .icon; &:before { content: @fa-var-strikethrough; }}
.icon-underline() { .icon; &:before { content: @fa-var-underline; }}
.icon-table() { .icon; &:before { content: @fa-var-table; }}
.icon-magic() { .icon; &:before { content: @fa-var-magic; }}
.icon-truck() { .icon; &:before { content: @fa-var-truck; }}
.icon-pinterest() { .icon; &:before { content: @fa-var-pinterest; }}
.icon-pinterest-sign() { .icon; &:before { content: @fa-var-pinterest-sign; }}
.icon-google-plus-sign() { .icon; &:before { content: @fa-var-google-plus-sign; }}
.icon-google-plus() { .icon; &:before { content: @fa-var-google-plus; }}
.icon-money() { .icon; &:before { content: @fa-var-money; }}
.icon-caret-down() { .icon; &:before { content: @fa-var-caret-down; }}
.icon-caret-up() { .icon; &:before { content: @fa-var-caret-up; }}
.icon-caret-left() { .icon; &:before { content: @fa-var-caret-left; }}
.icon-caret-right() { .icon; &:before { content: @fa-var-caret-right; }}
.icon-columns() { .icon; &:before { content: @fa-var-columns; }}
.icon-sort() { .icon; &:before { content: @fa-var-sort; }}
.icon-sort-down() { .icon; &:before { content: @fa-var-sort-down; }}
.icon-sort-up() { .icon; &:before { content: @fa-var-sort-up; }}
.icon-envelope-alt() { .icon; &:before { content: @fa-var-envelope-alt; }}
.icon-linkedin() { .icon; &:before { content: @fa-var-linkedin; }}
.icon-undo() { .icon; &:before { content: @fa-var-undo; }}
.icon-legal() { .icon; &:before { content: @fa-var-legal; }}
.icon-dashboard() { .icon; &:before { content: @fa-var-dashboard; }}
.icon-comment-alt() { .icon; &:before { content: @fa-var-comment-alt; }}
.icon-comments-alt() { .icon; &:before { content: @fa-var-comments-alt; }}
.icon-bolt() { .icon; &:before { content: @fa-var-bolt; }}
.icon-sitemap() { .icon; &:before { content: @fa-var-sitemap; }}
.icon-umbrella() { .icon; &:before { content: @fa-var-umbrella; }}
.icon-paste() { .icon; &:before { content: @fa-var-paste; }}
.icon-user-md() { .icon; &:before { content: @fa-var-user-md; }}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The objective is to make the entire css applicable through mixins. Most of the time this will make the final css smaller (since will have 348 lines less). But more importantly, makes your layout more easy to maitain. There is one part I couldn't transform. It's marked with comments on the file. For now, you need to use the class "icon-large" and manually set width for icons on "li" tags.
Example:
// html
Link button with icon