CSS3-based Checkbox and Exclamation Icons without using images

css-based-icons.sass

@mixin span-icon
  float: left
  height: 9px
  line-height: 11px
  font-size: 13px
  font-weight: 800
  margin-top: 2px
  margin-bottom: 1px
  margin-right: 4px
  padding-bottom: 4px
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

span.exclamation
  @include span-icon
  width: 10px
  padding-left: 4px
  color: red
  background-color: #ffe8e8
  border: 1px solid #ffd8d8
span.exclamation:before
  content: '\01c3'

span.checkmark
  @include span-icon
  width: 12px
  color: green
  padding-left: 2px
  background-color: #e8ffe8
  border: 1px solid #a8ffa8
span.checkmark:before
  content: '\2714'