Some simple classes to be used with @extend and the pictos font

iOS-pictos-buttons.sass

+font-face("pictos-web", font-files("pictos-web", woff, "pictos-web.ttf", truetype, "pictos-web.svg#webfontIyfZbseF", svg), 'pictos-web.eot')
.pictos
  font-family: 'pictos-web'
  font-weight: normal
  font-style: normal

=pictos-button($char)
  @extend .pictos-button-style
  &:before
    content: $char

.pictos-button-style
  text-indent: -99999px
  display: inline-block
  position: relative
  text-decoration: none
  &:before
    @extend .pictos
    float: right
    text-indent: 0
    display: inline-block

.button-style
  text-decoration: none
  padding: 2px 10px 0
  min-width: 32px
  height: 28px
  text-align: center
  color: #fff
  @extend .border-box
  +background-clip(padding-box)
  +text-shadow(rgba(#000, .3), 0, 1px, 1px)
  +round-corners
  font-size: 12px

.icon-button
  &:before
    @extend .button-style
    font-size: 19px
    padding-top: 4px

.nav-button
  +gradient-bg(darken($nav-bg, 4), 15)
  -webkit-box-shadow: rgba(#000, .2) 0px 2px 1px 0px inset, rgba(#000, .5) 0px 0 0 1px inset, rgba(#fff, .2) 0px 1px 1px 0px
  -moz-box-shadow: rgba(#000, .2) 0px 2px 1px 0px inset, rgba(#000, .5) 0px 0 0 1px inset, rgba(#fff, .2) 0px 1px 1px 0px
  box-shadow: rgba(#000, .2) 0px 2px 1px 0px inset, rgba(#000, .5) 0px 0 0 1px inset, rgba(#fff, .2) 0px 1px 1px 0px
  &:active
    +gradient-bg(darken($nav-bg, 10), 15)