Semantic Fontawesome Icons + Compass Fancy Buttons

main-styles.scss

@import fontawesome;
@import fancy-buttons;
@import icons;

// now look, a semantic selector! 
// you don't have to add .icon-envelope-alt to your markup
// use any of webfont-based icons at fortawesome.github.com/Font-Awesome/
// The result will be buttons like this: http://cl.ly/image/2c1t1q0W0t3P

a.request-invite {
  @include icon($firetruck-red, '.icon-envelope');
}

config.rb

// github.com/imathis/fancy-buttons
require 'fancy-buttons'

// ... + the rest of your config

fontawesome.scss

/*  FontAwesome CSS converted to .scss Sass */

@import "compass/css3/font-face";
$font_path: "fontawesome-webfont";

@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
);

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}

/*  Font Awesome uses the 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"; }

/* and so on for many more icons ... */

icons.scss

@mixin fontawesome {
  @content;
  &:before {
    width: 20px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
  }
}

// now mix fancybutton and fontawesome together 
// by using @extend we can just pass in the fontawesome.scss selectors
// we need the #{} interpolation syntax to handle a selector eg .icon-envelope

@mixin icon($color, $icon-selector, $padding: 4px) {
  @include fancy-button-matte($color, $small-font-size, $padding, 1px);
  @include fontawesome { @extend #{$icon-selector}; }
}

If you want to use this technique for lists you can pass the colour through to the icon definition and have bulletted lists with icons a different colour from the text.