Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

// Create a variable list for the icon names and content attribute
$project-icons-list: "search"             "\e603",
                    "envelope"           "\e604",
                    "star-empty"         "\e606",
                    "ok"                 "\e605",
                    "twitter"            "\e601",
                    "facebook"           "\e602",
                    "globe"              "\e600",
                    "reorder"            "\e608",
                    "angle-down"         "\e607",
                    "external-link-sign" "\e609";
// Set up variables for selector concatenation
$icon-selector-list: ();
$icon-selector-list-after: ();

// Generate a selector with its content for each icon
@each $project-icon in $project-icons-list {
  $icon-name: nth($project-icon, 1); // Variable for the icon name
  $icon-selector: "icon-#{$icon-name}"; // Variable for the selector
  $icon-content: nth($project-icon, 2); // Variable for the icon content
  
  // Create default classes
  .#{$icon-selector} {
    &:before {
      content: "#{$icon-content}";
    }
  }
  // Create placeholder classes for when we want the icon after text
  %#{$icon-selector}-after {
    &:after {
      content: "#{$icon-content}";
    }
  }
  
  // Create a concatenated list of all icon selectors
  $icon-selector-list: $icon-selector-list, unquote('.#{$icon-selector}'); // Default
  $icon-selector-list-after: $icon-selector-list-after, unquote('%#{$icon-selector}-after'); // After
}

%icon,
#{$icon-selector-list},
#{$icon-selector-list-after},
[class^="icon-"], [class*=" icon-"] {
  font-family: 'project';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

SassMeister-output.css

.icon-search:before {
  content: "\e603";
}

.icon-envelope:before {
  content: "\e604";
}

.icon-star-empty:before {
  content: "\e606";
}

.icon-ok:before {
  content: "\e605";
}

.icon-twitter:before {
  content: "\e601";
}

.icon-facebook:before {
  content: "\e602";
}

.icon-globe:before {
  content: "\e600";
}

.icon-reorder:before {
  content: "\e608";
}

.icon-angle-down:before {
  content: "\e607";
}

.icon-external-link-sign:before {
  content: "\e609";
}

.icon-search, .icon-envelope, .icon-star-empty, .icon-ok, .icon-twitter, .icon-facebook, .icon-globe, .icon-reorder, .icon-angle-down, .icon-external-link-sign,
[class^="icon-"], [class*=" icon-"] {
  font-family: 'project';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}