vwall · vwall · Mar 9, 2012 · Mar 8, 2012
diff --git a/README.md b/README.md
@@ -76,6 +76,12 @@ Demo App at https://github.com/vwall/Compass-Twitter-Bootstrap-Demo-App
     @import "compass_twitter_bootstrap"
 
 
+## Using [Font Awesome](http://fortawesome.github.com/Font-Awesome/)
+
+To use the font awesome font and icons simply change the standard import to:
+
+    @import "compass_twitter_bootstrap_awesome"
+
 ## TWITTER BOOTSTRAP
 
 Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.

diff --git a/stylesheets/_compass_twitter_bootstrap_awesome.scss b/stylesheets/_compass_twitter_bootstrap_awesome.scss
@@ -0,0 +1,66 @@
+/*!
+ * Bootstrap v2.0.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+@import "compass";
+
+@import "compass_twitter_bootstrap/mixins";
+
+// CSS Reset
+@import "compass_twitter_bootstrap/reset";
+
+// Core variables and mixins
+@import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+
+
+// Grid system and page structure
+@import "compass_twitter_bootstrap/scaffolding";
+@import "compass_twitter_bootstrap/grid";
+@import "compass_twitter_bootstrap/layouts";
+
+// Base CSS
+@import "compass_twitter_bootstrap/type";
+@import "compass_twitter_bootstrap/code";
+@import "compass_twitter_bootstrap/forms";
+@import "compass_twitter_bootstrap/tables";
+
+// Components: common
+@import "compass_twitter_bootstrap/font-awesome";
+@import "compass_twitter_bootstrap/dropdowns";
+@import "compass_twitter_bootstrap/wells";
+@import "compass_twitter_bootstrap/component-animations";
+@import "compass_twitter_bootstrap/close";
+
+// Components: Buttons & Alerts
+@import "compass_twitter_bootstrap/buttons";
+@import "compass_twitter_bootstrap/button-groups";
+@import "compass_twitter_bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import "compass_twitter_bootstrap/navs";
+@import "compass_twitter_bootstrap/navbar";
+@import "compass_twitter_bootstrap/breadcrumbs";
+@import "compass_twitter_bootstrap/pagination";
+@import "compass_twitter_bootstrap/pager";
+
+// Components: Popovers
+@import "compass_twitter_bootstrap/modals";
+@import "compass_twitter_bootstrap/tooltip";
+@import "compass_twitter_bootstrap/popovers";
+
+// Components: Misc
+@import "compass_twitter_bootstrap/thumbnails";
+@import "compass_twitter_bootstrap/labels";
+@import "compass_twitter_bootstrap/progress-bars";
+@import "compass_twitter_bootstrap/accordion";
+@import "compass_twitter_bootstrap/carousel";
+@import "compass_twitter_bootstrap/hero-unit";
+
+// Utility classes
+@import "compass_twitter_bootstrap/utilities"; // Has to be last to override when necessary
diff --git a/stylesheets/compass_twitter_bootstrap/_font-awesome.scss b/stylesheets/compass_twitter_bootstrap/_font-awesome.scss
@@ -0,0 +1,220 @@
+@import "compass/css3/font-face";
+$font_path: "fontawesome-webfont" !default;
+
+@include font-face(
+	'FontAwesome',
+	font-files(
+		"#{$font_path}.woff", woff,
+		"#{$font_path}.ttf", truetype,
+		"#{$font_path}.otf", opentype,
+		"#{$font_path}.svgz#FontAwesomeRegular", svg,
+		"#{$font_path}.svg#FontAwesomeRegular", svg),
+	'#{$font_path}.eot',
+	normal,
+	normal);
+
+// ICONS
+// Glyphs and icons for buttons, nav, and more
+// -------------------------------------------
+// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+    font-family: FontAwesome;
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+}
+
+// makes the font 33% larger relative to the icon container
+.icon-large:before {
+//    display: inline-block;
+    font-size: 4/3em;
+}
+
+.btn {
+    [class^="icon-"],
+    [class*=" icon-"] {
+    line-height: .9em; // keeps button heights with and without icons the same
+    }
+}
+
+li {
+    [class^="icon-"],
+    [class*=" icon-"] {
+        display: inline-block;
+        width: 1.25em;
+        text-align: center;
+    }
+    .icon-large[class^="icon-"],
+    .icon-large[class*=" icon-"]  {
+        width: 1.5*1.25em; // 1.5 increased font size for icon-large * 1.25 width
+    }
+}
+
+li[class^="icon-"],
+li[class*=" icon-"] {
+    margin-left: 0;
+    list-style-type: none;
+
+    &:before {
+        text-indent: -2em;
+        text-align: center;
+    }
+    &.icon-large:before {
+        text-indent: -4/3em;
+    }
+}
+
+// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off
+// random characters that represent icons
+.icon-glass:before              { content: "\f000"; }
+.icon-music:before              { content: "\f001"; }
+.icon-search:before             { content: "\f002"; }
+.icon-envelope:before           { content: "\f003"; }
+.icon-heart:before              { content: "\f004"; }
+.icon-star:before               { content: "\f005"; }
+.icon-star-empty:before         { content: "\f006"; }
+.icon-user:before               { content: "\f007"; }
+.icon-film:before               { content: "\f008"; }
+.icon-th-large:before           { content: "\f009"; }
+.icon-th:before                 { content: "\f00a"; }
+.icon-th-list:before            { content: "\f00b"; }
+.icon-ok:before                 { content: "\f00c"; }
+.icon-remove:before             { content: "\f00d"; }
+.icon-zoom-in:before            { content: "\f00e"; }
+
+.icon-zoom-out:before           { content: "\f010"; }
+.icon-off:before                { content: "\f011"; }
+.icon-signal:before             { content: "\f012"; }
+.icon-cog:before                { content: "\f013"; }
+.icon-trash:before              { content: "\f014"; }
+.icon-home:before               { content: "\f015"; }
+.icon-file:before               { content: "\f016"; }
+.icon-time:before               { content: "\f017"; }
+.icon-road:before               { content: "\f018"; }
+.icon-download-alt:before       { content: "\f019"; }
+.icon-download:before           { content: "\f01a"; }
+.icon-upload:before             { content: "\f01b"; }
+.icon-inbox:before              { content: "\f01c"; }
+.icon-play-circle:before        { content: "\f01d"; }
+.icon-repeat:before             { content: "\f01e"; }
+
+// \f020 is not a valid unicode character. all shifted one down
+.icon-refresh:before            { content: "\f021"; }
+.icon-list-alt:before           { content: "\f022"; }
+.icon-lock:before               { content: "\f023"; }
+.icon-flag:before               { content: "\f024"; }
+.icon-headphones:before         { content: "\f025"; }
+.icon-volume-off:before         { content: "\f026"; }
+.icon-volume-down:before        { content: "\f027"; }
+.icon-volume-up:before          { content: "\f028"; }
+.icon-qrcode:before             { content: "\f029"; }
+.icon-barcode:before            { content: "\f02a"; }
+.icon-tag:before                { content: "\f02b"; }
+.icon-tags:before               { content: "\f02c"; }
+.icon-book:before               { content: "\f02d"; }
+.icon-bookmark:before           { content: "\f02e"; }
+.icon-print:before              { content: "\f02f"; }
+
+.icon-camera:before             { content: "\f030"; }
+.icon-font:before               { content: "\f031"; }
+.icon-bold:before               { content: "\f032"; }
+.icon-italic:before             { content: "\f033"; }
+.icon-text-height:before        { content: "\f034"; }
+.icon-text-width:before         { content: "\f035"; }
+.icon-align-left:before         { content: "\f036"; }
+.icon-align-center:before       { content: "\f037"; }
+.icon-align-right:before        { content: "\f038"; }
+.icon-align-justify:before      { content: "\f039"; }
+.icon-list:before               { content: "\f03a"; }
+.icon-indent-left:before        { content: "\f03b"; }
+.icon-indent-right:before       { content: "\f03c"; }
+.icon-facetime-video:before     { content: "\f03d"; }
+.icon-picture:before            { content: "\f03e"; }
+
+.icon-pencil:before             { content: "\f040"; }
+.icon-map-marker:before         { content: "\f041"; }
+.icon-adjust:before             { content: "\f042"; }
+.icon-tint:before               { content: "\f043"; }
+.icon-edit:before               { content: "\f044"; }
+.icon-share:before              { content: "\f045"; }
+.icon-check:before              { content: "\f046"; }
+.icon-move:before               { content: "\f047"; }
+.icon-step-backward:before      { content: "\f048"; }
+.icon-fast-backward:before      { content: "\f049"; }
+.icon-backward:before           { content: "\f04a"; }
+.icon-play:before               { content: "\f04b"; }
+.icon-pause:before              { content: "\f04c"; }
+.icon-stop:before               { content: "\f04d"; }
+.icon-forward:before            { content: "\f04e"; }
+
+.icon-fast-forward:before       { content: "\f050"; }
+.icon-step-forward:before       { content: "\f051"; }
+.icon-eject:before              { content: "\f052"; }
+.icon-chevron-left:before       { content: "\f053"; }
+.icon-chevron-right:before      { content: "\f054"; }
+.icon-plus-sign:before          { content: "\f055"; }
+.icon-minus-sign:before         { content: "\f056"; }
+.icon-remove-sign:before        { content: "\f057"; }
+.icon-ok-sign:before            { content: "\f058"; }
+.icon-question-sign:before      { content: "\f059"; }
+.icon-info-sign:before          { content: "\f05a"; }
+.icon-screenshot:before         { content: "\f05b"; }
+.icon-remove-circle:before      { content: "\f05c"; }
+.icon-ok-circle:before          { content: "\f05d"; }
+.icon-ban-circle:before         { content: "\f05e"; }
+
+.icon-arrow-left:before         { content: "\f060"; }
+.icon-arrow-right:before        { content: "\f061"; }
+.icon-arrow-up:before           { content: "\f062"; }
+.icon-arrow-down:before         { content: "\f063"; }
+.icon-share-alt:before          { content: "\f064"; }
+.icon-resize-full:before        { content: "\f065"; }
+.icon-resize-small:before       { content: "\f066"; }
+.icon-plus:before               { content: "\f067"; }
+.icon-minus:before              { content: "\f068"; }
+.icon-asterisk:before           { content: "\f069"; }
+.icon-exclamation-sign:before   { content: "\f06a"; }
+.icon-gift:before               { content: "\f06b"; }
+.icon-leaf:before               { content: "\f06c"; }
+.icon-fire:before               { content: "\f06d"; }
+.icon-eye-open:before           { content: "\f06e"; }
+
+.icon-eye-close:before          { content: "\f070"; }
+.icon-warning-sign:before       { content: "\f071"; }
+.icon-plane:before              { content: "\f072"; }
+.icon-calendar:before           { content: "\f073"; }
+.icon-random:before             { content: "\f074"; }
+.icon-comment:before            { content: "\f075"; }
+.icon-magnet:before             { content: "\f076"; }
+.icon-chevron-up:before         { content: "\f077"; }
+.icon-chevron-down:before       { content: "\f078"; }
+.icon-retweet:before            { content: "\f079"; }
+.icon-shopping-cart:before      { content: "\f07a"; }
+.icon-folder-close:before       { content: "\f07b"; }
+.icon-folder-open:before        { content: "\f07c"; }
+.icon-resize-vertical:before    { content: "\f07d"; }
+.icon-resize-horizontal:before  { content: "\f07e"; }
+
+.icon-bar-chart:before          { content: "\f080"; }
+.icon-twitter-sign:before       { content: "\f081"; }
+.icon-facebook-sign:before      { content: "\f082"; }
+.icon-camera-retro:before       { content: "\f083"; }
+.icon-key:before                { content: "\f084"; }
+.icon-cogs:before               { content: "\f085"; }
+.icon-comments:before           { content: "\f086"; }
+.icon-thumbs-up:before          { content: "\f087"; }
+.icon-thumbs-down:before        { content: "\f088"; }
+.icon-star-half:before          { content: "\f089"; }
+.icon-heart-empty:before        { content: "\f08a"; }
+.icon-signout:before            { content: "\f08b"; }
+.icon-linkedin-sign:before      { content: "\f08c"; }
+.icon-pushpin:before            { content: "\f08d"; }
+.icon-external-link:before      { content: "\f08e"; }
+
+.icon-signin:before             { content: "\f090"; }
+.icon-trophy:before             { content: "\f091"; }
+.icon-github-sign:before        { content: "\f092"; }
+.icon-upload-alt:before         { content: "\f093"; }
+.icon-lemon:before              { content: "\f094"; }
diff --git a/stylesheets_sass/_compass_twitter_bootstrap_awesome.sass b/stylesheets_sass/_compass_twitter_bootstrap_awesome.sass
@@ -0,0 +1,70 @@
+/*!
+ * Bootstrap v2.0.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+
+@import compass
+
+@import compass_twitter_bootstrap/mixins
+
+// CSS Reset
+@import compass_twitter_bootstrap/reset
+
+// Core variables and mixins
+@import compass_twitter_bootstrap/variables
+
+// Modify this for custom colors, font-sizes, etc
+
+// Grid system and page structure
+@import compass_twitter_bootstrap/scaffolding
+@import compass_twitter_bootstrap/grid
+@import compass_twitter_bootstrap/layouts
+
+// Base CSS
+@import compass_twitter_bootstrap/type
+@import compass_twitter_bootstrap/code
+@import compass_twitter_bootstrap/forms
+@import compass_twitter_bootstrap/tables
+
+// Components: common
+@import compass_twitter_bootstrap/font-awesome
+@import compass_twitter_bootstrap/dropdowns
+@import compass_twitter_bootstrap/wells
+@import compass_twitter_bootstrap/component-animations
+@import compass_twitter_bootstrap/close
+
+// Components: Buttons & Alerts
+@import compass_twitter_bootstrap/buttons
+@import compass_twitter_bootstrap/button-groups
+@import compass_twitter_bootstrap/alerts
+
+// Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import compass_twitter_bootstrap/navs
+@import compass_twitter_bootstrap/navbar
+@import compass_twitter_bootstrap/breadcrumbs
+@import compass_twitter_bootstrap/pagination
+@import compass_twitter_bootstrap/pager
+
+// Components: Popovers
+@import compass_twitter_bootstrap/modals
+@import compass_twitter_bootstrap/tooltip
+@import compass_twitter_bootstrap/popovers
+
+// Components: Misc
+@import compass_twitter_bootstrap/thumbnails
+@import compass_twitter_bootstrap/labels
+@import compass_twitter_bootstrap/progress-bars
+@import compass_twitter_bootstrap/accordion
+@import compass_twitter_bootstrap/carousel
+@import compass_twitter_bootstrap/hero-unit
+
+// Utility classes
+@import compass_twitter_bootstrap/utilities
+
+// Has to be last to override when necessary