A Pen by Marian Arlt.

index.haml

.container
  %h1 Sass Icons
  %h2 <span class="icon previous"></span>&nbsp; Controls &nbsp;<span class="icon next"></span>
  %div
    %p
      // One span, that's all.
      %span.icon.search
      Search
    %p
      %span.icon.add
      Add
    %p
      %span.icon.close
      Close
    %p
      %span.icon.remove
      Remove
  %div
    %p
      %span.icon.check
      Check
    %p
      %span.icon.warning
      Warning
    %p
      %span.icon.denied
      Denied
    %p
      %span.icon.info
      Info
  %div
    %p
      %span.icon.power
      Power
    %p
      %span.icon.play
      Play
    %p
      %span.icon.stop
      Stop
    %p
      %span.icon.pause
      Pause
  %div
    %p
      %span.icon.ffw
      Fast Forward
    %p
      %span.icon.fbw
      Fast Backward
    %p
      %span.icon.volume-on
      Volume On
    %p
      %span.icon.volume-off
      Volume Off

Resizable-SASS-Icons.markdown

Resizable SASS Icons

Pure CSS Icons written with relatively little SASS. Resizable! Change one variable to change icon size.

A Pen by Marian Arlt on CodePen.

License.

script.js

/*

Tested in Chrome and Safari.

The IDEA OF THIS PEN is to reduce the effort of coding big loads of css for one particular icon size using sass and variables.

The icons rely heavily on calculation. Since browsers handle maths very different from each other there's differences between rendering. While on very big sizes this really doesn't matter that much, on a micro scale, which is what most icon fonts are used for, every pixel matters.

Safari for example always rounds pixels down. This makes the rectangle of the stop icon miss a pixel in height and widthin Safari, making it look awkward. Same with the inner margin of the pause icon. I also noticed a very weird behaviour in Chrome when you change viewport width to an odd number like 801px. This makes everything move one pixel except some pseudo elements. Really strange.

Although a nice alternative to fonts, the real ISSUE with this is browser zoom. You can optimize the shit out of these things, but browser zoom will distort them. (The magnifying glass works surprisingly well)
You could probably use JS to detect the current zoom level and based on the result apply more rules. Imagine the bloat in size and the weeks of optimizing positions. Very contrary to what I tried to accomplish with this pen. I would've done more of these if the zoom thing hadn't interfered.

So while I really love the idea of css icons, it's as if one would try to make a css alphabet. Not that it wouldn't be possible or a funny pen (any takers?), but it just won't work well.

style.sass

@import "compass"
@import compass/css3
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400)

$baseColor: DarkSlateBlue
$hoverColor: PapayaWhip
$backColor: Salmon

// Sizes that work well without heavy distortions:
// 16, 18, 21, 25, 28, 32, 35, 40+
// They look really nice on big sizes, try 50px or 100px
$iconSize: 18px
$iconBorderWidth: $iconSize/8
$iconInnerLines: $iconSize/8

// --- *** BEGIN STYLING *** --- ///

*
  box-sizing: border-box
  white-space: nowrap
  -webkit-backface-visibility: hidden

html, body
  min-height: 100%
    
body
  font: 400 $iconSize 'Droid Sans'
  line-height: 1.5em
  margin: 0
  padding: 0
  color: $baseColor
  text-align: center
  background-color: $backColor

h1, h2
  margin: 0 auto
  padding-bottom: .75em
  border-bottom: $hoverColor solid 1px
  text-transform: uppercase

h2
  font-size: 1em
  padding-top: .75em
  margin-bottom: 1em

.container
  margin: 3em auto 0
  display: inline-block

  div
    float: left
    margin: 0 1em
    &:first-of-type
      margin-left: 0
    &:last-of-type
      margin-right: 0

p
  text-align: left
  +transition(all .3s)

// --- *** END STYLING *** --- //
    
// --- *** BEGIN ICONS *** --- //

// All Icons
.icon
  height: $iconSize
  width: $iconSize
  display: inline-block
  position: relative
  vertical-align: middle
  margin-top: -.2em
  +transition(all .3s)
  &:before, &:after
    content: ''
    position: absolute
    display: block
    +transition(all .3s)
  &:hover
    border-color: $hoverColor
    cursor: pointer
    &:before, &:after
      background: $hoverColor

p:hover, .icon:hover, p:hover > .icon
  border-color: $hoverColor
  cursor: pointer
  color: $hoverColor

p:hover > .icon:after, p:hover > .icon:before
  background: $hoverColor

// Search Icon
.search:before
  height: $iconSize/2
  width: $iconSize/2
  border: $iconBorderWidth solid $baseColor
  +border-radius($iconSize)

.search:after
  height: $iconSize/2
  width: $iconBorderWidth
  background: $baseColor
  +border-radius($iconSize)
  +transform(rotate(-45deg))
  top: $iconSize/2
  left: $iconSize*.65

.search:hover:before, p:hover > .search:before
  background: transparent
  border-color: $hoverColor

// Add Icon
.add
  +border-radius($iconSize)
  border: $iconBorderWidth solid $baseColor
  width: $iconSize
  height: $iconSize
  &:before, &:after
    +border-radius($iconSize)
    background: $baseColor
    height: $iconInnerLines
    top: 50%
    left: 50%
    margin-left: -$iconSize/4
    @if $iconSize == 18px
      width: $iconSize/2 - 1
      margin-top: -$iconInnerLines/2
    @else if $iconSize == 16
      width: $iconSize/2
      margin-top: -$iconInnerLines/2
    @else if $iconSize >= 25 and $iconSize <= 27
      width: $iconSize/2
      margin-top: -$iconInnerLines/2
    @else if $iconSize == 32
      width: $iconSize/2
      margin-top: -$iconInnerLines/2
    @else
      width: $iconSize/2
      margin-top: -$iconInnerLines/2
  &:after
    width: $iconInnerLines
    top: 50%
    margin-top: -$iconSize/4
    left: 50%
    margin-left: -$iconInnerLines/2
    @if $iconSize == 18px
      height: $iconSize/2 - 1
    @else if $iconSize >= 25 and $iconSize <= 27
      height: $iconSize/2
      margin-left: -$iconInnerLines/2 + 1
    @else
      height: $iconSize/2

// Close Icon
.close
  @extend .add
  &:before, &:after
    +transform(rotate(-45deg))

// Remove Icon
.remove
  @extend .add
  &:after
    height: 0
    width: 0

// Info Icon
.info
  @extend .add
  &:before
    height: $iconInnerLines
    width: $iconInnerLines
    left: 50%
    margin-left: -$iconInnerLines/2
    top: 50%
    margin-top: -$iconSize/4
    @if $iconSize >= 25 and $iconSize <= 27
      margin-left: -$iconInnerLines/2 + 1
  &:after
    height: $iconSize/3
    top: 50%
    margin-top: -$iconInnerLines/2

// Check Icon
.check
  @extend .close
  &:after
    width: $iconInnerLines
    height: $iconSize/4
    left: 50%
    margin-left: -$iconSize/7
    top: 50%
    margin-top: -$iconSize/15
  &:before
    left: 50%
    margin-left: -$iconSize/8
    width: $iconSize/2.5

// Warning Icon
.warning
  @extend .info
  +transform(rotate(180deg))
  &:before, &:after
    @if $iconSize >= 25 and $iconSize <= 27
      margin-left: -2px

// Power Icon
.power
  @extend .add
  &:before
    height: 0
    width: 0
  &:after
    top: 0
    margin-top: -($iconBorderWidth+$iconInnerLines)
    left: 50%
    margin-left: -($iconBorderWidth+$iconInnerLines/2)
    border: $iconBorderWidth solid $backColor

// Denied Icon
.denied
  @extend .close
  &:after
    height: 0
  &:before
    +border-radius(0)
    width: $iconSize -$iconInnerLines
    left: 50%
    margin-left: -$iconSize/2+$iconInnerLines/2

// Play Icon
.play
  @extend .add
  &:before
    height: 0
  &:after
    +border-radius(0)
    background: transparent
    border: $iconSize/4 solid transparent
    border-width: $iconSize/4 $iconSize/4+$iconInnerLines
    border-left-color: $baseColor
    height: 0
    width: 0
    left: 50%
    margin-left: -$iconSize/8
    top: 50%
    @if $iconSize == 21
      margin-left: -$iconSize/8 + 1
  &:hover:after
    background: transparent
    border-color: transparent
    border-left-color: $hoverColor

p:hover > .play:after
  background: transparent
  border-color: transparent
  border-left-color: $hoverColor

// Stop Icon
.stop
  @extend .add
  &:before
    height: 0
  &:after
    +border-radius(0)
    @if $iconSize == 18px
      height: $iconSize/2.75 - 1
      width: $iconSize/2.75 - 1
    @else if $iconSize == 20
      height: $iconSize/2.75 + 1
      width: $iconSize/2.75 + 1
    @else if $iconSize == 28
      height: $iconSize/2.75 + 1
      width: $iconSize/2.75 + 1
    @else
      height: $iconSize/2.75
      width: $iconSize/2.75
    left: 50%
    margin-left: -$iconSize*.18
    top: 50%
    margin-top: -$iconSize*.18

// Pause Icon
.pause
  @extend .add
  &:before
    @if $iconSize == 18px
      height: $iconSize/2 - 1
    @else
      height: $iconSize/2
    width: $iconInnerLines
    margin-top: -$iconSize/4
    @if $iconSize == 16px
      margin-left: -$iconInnerLines/2+$iconSize/9 + 1
    @else
      margin-left: -$iconInnerLines/2+$iconSize/9
  &:after
    margin-left: -$iconInnerLines/2-$iconSize/9

// Fast Forward Icon
.ffw
  @extend .play
  &:after
    margin-left: -$iconSize/6
  &:before
    @if $iconSize == 18px
      height: $iconSize/2 - 1
    @else
      height: $iconSize/2
    width: $iconInnerLines
    margin-top: -$iconSize/4
    margin-left: $iconSize*.11

// Fast Backward Icon
.fbw
  @extend .ffw
  +transform(rotate(180deg))

// Volume On Icon
.volume-on
  @extend .play
  &:after
    margin-left: -$iconSize/1.5
    border-left-color: transparent
    border-right-color: $baseColor
  &:before
    +border-radius($iconSize)
    border: $iconInnerLines/1.5 solid transparent
    border-right-color: $baseColor
    height: $iconSize*.35
    width: $iconSize*.35
    background: transparent
    margin-top: -$iconSize/4
    margin-left: -$iconSize/4
  &:hover:after, &:hover:before
    background: transparent
    border-color: transparent
    border-right-color: $hoverColor

p:hover > .volume-on:after, p:hover > .volume-on:before
  background: transparent
  border-color: transparent
  border-right-color: $hoverColor

// Volume Off Icon
.volume-off
  @extend .denied
  &:after
    +transform(rotate(0))
    +border-radius(0)
    background: transparent
    border: $iconSize/4 solid transparent
    border-width: $iconSize/4 $iconSize/4+$iconInnerLines
    height: 0
    width: 0
    left: 50%
    margin-left: -$iconSize/8
    top: 50%
    margin-left: -$iconSize/1.5
    border-left-color: transparent
    border-right-color: $baseColor
  &:hover:after
    background: transparent
    border-color: transparent
    border-right-color: $hoverColor

p:hover > .volume-off:after
  background: transparent
  border-color: transparent
  border-right-color: $hoverColor

// Previous Icon
.previous
  @extend .close
  &:before
    @if $iconSize <= 18px
      width: 6px
      margin-top: -2px
      margin-left: -3px
    @else if $iconSize > 18px and $iconSize < 24
      width: $iconSize/3
      margin-top: -$iconSize/6
      margin-left: -$iconSize/6
    @else
      width: $iconSize/3
      margin-top: -$iconSize/7
      margin-left: -$iconSize/5
  &:after
    @if $iconSize <= 18px
      height: 6px
      margin-top: -2px
      margin-left: -1px
    @else if $iconSize > 18px and $iconSize < 24
      height: $iconSize/3
      margin-top: -$iconSize/12
      margin-left: -$iconSize/12
    @else
      height: $iconSize/3
      margin-top: -$iconSize/12
      margin-left: -$iconSize/10

// Next Icon
.next
  @extend .previous
  +transform(rotate(180deg))
    
// --- *** END ICONS *** --- //