Simpler, more performant styles for Symbolset icons

_ss-icon.scss

/*
 * Cleaner Symbolset styles 
 * Edited for front-end performance by Jxnblk
 *
 * - Removed all adjoining selectors
 * - Removed slow ^= and *= selectors
 * - Removed .right functionality
 * - Removed ligature functionality
 *
 */

$webfont: 'ss-geomicons-squared' !default;
$webfont-name: 'SSGeomiconsSquared' !default;
$webfont-path: '/webfonts/' !default;

@font-face {
  font-family: "#{$webfont-name}";
  src: url('#{$webfont-path}#{$webfont}.eot');
  src: url('#{$webfont-path}#{$webfont}.eot?#iefix') format('embedded-opentype'),
       url('#{$webfont-path}#{$webfont}.woff') format('woff'),
       url('#{$webfont-path}#{$webfont}.ttf')  format('truetype'),
       url('#{$webfont-path}#{$webfont}.svg##{$webfont-name}') format('svg');
  font-weight: 400;
  font-style: normal;
}

// If you're using more than one Symbolset font, remove the .ss-icon selector
.ss-icon:before,
#{$webfont}:before {
  font-family: "#{$webfont-name}";
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;

  // Hack for better vertical alignment (optional)
  position: relative;
  top: .1875em;
}

// Put the rest of the Symbolset CSS file here. I recommend removing the adjoining .right selectors