Generated by SassMeister.com.

SassMeister-input-HTML.markdown

Urbanspoon Font file Instructions

1. copy this the _urbanspoon_icon.sass file
2. goto http://sassmeister.com/gist/9399236
3. paste the _urbanspoon_icon.sass file into the sass paine to replace everything below the comments. from line 32.
4. Copy the css paine and paste that back into the stlyes.css file in the urbanspoon fonts folder.
5. Please make sure you dont remove the comments.
6. View the index.html file in the browser.

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

$icon-font: "urbanspoon-icons"
$primary-color: #002654
$secondary-color: #ffc52e
$light-gray: #aaa
$xmedium-font: 14px
$xsmall-font: 10px
$medium-gray: #666

=icon-font($font-family: $icon-font)
  font-family: $font-family
  speak: none
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-transform: none
  line-height: 1
  -webkit-font-smoothing: antialiased

@font-face
  font-family: 'urbanspoon-icons'
  src: url("urbanspoon.eot")
  src: url("urbanspoon.eot?#iefix") format("embedded-opentype"), url("urbanspoon.woff") format("woff"), url("urbanspoon.ttf") format("truetype"), url("urbanspoon.svg#icomoon") format("svg")
  font-weight: normal
  font-style: normal


// copy _urbansspoon_icon.sass file here!
// Remove the @ font-face portion of the file.
// copy the css out to your right.

//PASTE BELOW HERE!!
.icon-font
  +icon-font
  &.primary
    color: $primary-color
  &.active
    color: $secondary-color
  &.big
    font-size: 18px
    vertical-align: -2px
    padding-right: 5px
  &.huge
    font-size: 24px
    vertical-align: -11px
    padding-right: 5px

a
  &[class*="icon"],
  >[class*="icon"]
    color: $light-gray
    &:hover
      text-decoration: none


.icon-like, .icon-dislike, .icon-favorite, .icon-undo, .icon-wishlist, .icon-novote, .icon-quote, .icon-search, .icon-email, .icon-comment, .icon-guides, .icon-blog, .icon-review, .icon-twitter, .icon-gplus, .icon-compose, .icon-heart, .icon-share, .icon-share-box, .icon-plus, .icon-plus-sign, .icon-minus-sign, .icon-check, .icon-map, .icon-map-pin, .icon-add, .icon-ellipsis, .icon-compass, .icon-star, .icon-arrow, .icon-pin, .icon-footprints, .icon-car, .icon-globe, .icon-home, .icon-profilepic, .icon-camera, .icon-photos, .icon-takeout, .icon-wifi, .icon-link, .icon-lines, .icon-grid, .icon-list, .icon-magnify, .icon-speechbubble, .icon-conversation, .icon-phone, .icon-arrowdown, .icon-arrowright, .icon-arrowleft, .icon-delivery, .icon-facebook, .icon-location, .icon-megaphone, .icon-news, .icon-image, .icon-bold, .icon-italic, .icon-numbered-list, .icon-list, .icon-thumbs-up, .icon-thumbs-down, .icon-file-xml, .icon-add-image, .icon-float-right_float-right, .icon-float-right_float-left, .icon-float-right_center, .icon-menu
  @extend .icon-font

.icon-like:before
  content: "\75"

.icon-dislike:before
  content: "\64"

.icon-star:before,
.icon-favorite:before
  content: "\73"

.icon-heart:before,
.icon-wishlist:before
  content: "\68"

.icon-add:before,
.icon-novote:before
  content: "\e009"

.icon-quote:before
  content: "\22"

.icon-search:before
  content: "\0071"

.icon-twitter:before
  content: "\74"

.icon-gplus:before
  content: "\27"

.icon-compose:before
  content: "\6e"

.icon-email:before
  content: "\26"

.icon-share:before
  content: "\21"
  font-size: $xmedium-font

.icon-share-box:before
  content: "\2b"

.icon-plus:before
  content: "\70"

.icon-plus-sign:before
  content: "\24"

.icon-minus-sign:before
  content: "\23"

.icon-check:before
  content: "\6b"

.icon-map:before
  content: "\6d"

.icon-map-pin:before
  content: "\2c"

.icon-guides:before
  content: "\67"

.icon-ellipsis:before
  content: "\2e"

.icon-arrow:before
  content: "\61"

.icon-pin:before
  content: "\e00e"

.icon-footprints:before
  content: "\66"

.icon-car:before
  content: "\43"

.icon-globe:before
  content: "\77"

.icon-home:before
  content: "\48"

.icon-profilepic:before
  content: "\e013"

.icon-camera:before
  content: "\79"
  font-size: 15px
  vertical-align: -2px

.icon-photos:before
  content: "\e015"

.icon-takeout:before
  content: "\62"

.icon-wifi:before, .icon-blog:before
  content: "\72"

.icon-link:before
  content: "\6c"

.icon-lines:before
  content: "\e019"
  font-size: 20px
  color: #fff

.icon-grid:before
  content: "\47"

.icon-list:before
  content: "\4c"

.icon-magnify:before
  content: "\71"

.icon-speechbubble:before, .icon-comment:before
  content: "\63"

.icon-conversation:before
  content: "\44"

.icon-phone:before
  content: "\25"

.icon-arrowdown:before
  content: "\56"
  font-size: $xsmall-font
  color: $medium-gray

.icon-arrowright:before
  content: "\4e"

.icon-arrowleft:before
  content: "\50"

.icon-delivery:before
  content: "\4b"

.icon-facebook:before
  content: "\46"

.icon-location:before
  content: "\4d"

.icon-megaphone:before
  content: "\57"

.icon-news:before, .icon-review:before
  content: "\5a"

.icon-image:before
  content: "\2a"

.icon-bold:before
  content: "\2b"

.icon-italic:before
  content: "\2c"

.icon-numbered-list:before
  content: "\2d"

.icon-list:before
  content: "\4c"

.icon-thumbs-up:before
  content: "\55"

.icon-thumbs-down:before
  content: "\30"

.icon-file-xml:before
  content: "\35"

.icon-add-image:before
  content: "\2f"

.icon-redo:before
  content: "\21"

.icon-undo:before
  content: "\29"

.icon-float-right_float-right:before
  content: "\31"

.icon-float-right_float-left:before
  content: "\32"

.icon-float-right_center:before
  content: "\33"

.icon-menu:before
  content: "\34"

SassMeister-output.css

@font-face {
  font-family: "urbanspoon-icons";
  src: url("urbanspoon.eot");
  src: url("urbanspoon.eot?#iefix") format("embedded-opentype"), url("urbanspoon.woff") format("woff"), url("urbanspoon.ttf") format("truetype"), url("urbanspoon.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
.icon-font, .icon-like, .icon-dislike, .icon-favorite, .icon-undo, .icon-wishlist, .icon-novote, .icon-quote, .icon-search, .icon-email, .icon-comment, .icon-guides, .icon-blog, .icon-review, .icon-twitter, .icon-gplus, .icon-compose, .icon-heart, .icon-share, .icon-share-box, .icon-plus, .icon-plus-sign, .icon-minus-sign, .icon-check, .icon-map, .icon-map-pin, .icon-add, .icon-ellipsis, .icon-compass, .icon-star, .icon-arrow, .icon-pin, .icon-footprints, .icon-car, .icon-globe, .icon-home, .icon-profilepic, .icon-camera, .icon-photos, .icon-takeout, .icon-wifi, .icon-link, .icon-lines, .icon-grid, .icon-list, .icon-magnify, .icon-speechbubble, .icon-conversation, .icon-phone, .icon-arrowdown, .icon-arrowright, .icon-arrowleft, .icon-delivery, .icon-facebook, .icon-location, .icon-megaphone, .icon-news, .icon-image, .icon-bold, .icon-italic, .icon-numbered-list, .icon-thumbs-up, .icon-thumbs-down, .icon-file-xml, .icon-add-image, .icon-float-right_float-right, .icon-float-right_float-left, .icon-float-right_center, .icon-menu {
  font-family: "urbanspoon-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }
  .icon-font.primary, .primary.icon-like, .primary.icon-dislike, .primary.icon-favorite, .primary.icon-undo, .primary.icon-wishlist, .primary.icon-novote, .primary.icon-quote, .primary.icon-search, .primary.icon-email, .primary.icon-comment, .primary.icon-guides, .primary.icon-blog, .primary.icon-review, .primary.icon-twitter, .primary.icon-gplus, .primary.icon-compose, .primary.icon-heart, .primary.icon-share, .primary.icon-share-box, .primary.icon-plus, .primary.icon-plus-sign, .primary.icon-minus-sign, .primary.icon-check, .primary.icon-map, .primary.icon-map-pin, .primary.icon-add, .primary.icon-ellipsis, .primary.icon-compass, .primary.icon-star, .primary.icon-arrow, .primary.icon-pin, .primary.icon-footprints, .primary.icon-car, .primary.icon-globe, .primary.icon-home, .primary.icon-profilepic, .primary.icon-camera, .primary.icon-photos, .primary.icon-takeout, .primary.icon-wifi, .primary.icon-link, .primary.icon-lines, .primary.icon-grid, .primary.icon-list, .primary.icon-magnify, .primary.icon-speechbubble, .primary.icon-conversation, .primary.icon-phone, .primary.icon-arrowdown, .primary.icon-arrowright, .primary.icon-arrowleft, .primary.icon-delivery, .primary.icon-facebook, .primary.icon-location, .primary.icon-megaphone, .primary.icon-news, .primary.icon-image, .primary.icon-bold, .primary.icon-italic, .primary.icon-numbered-list, .primary.icon-thumbs-up, .primary.icon-thumbs-down, .primary.icon-file-xml, .primary.icon-add-image, .primary.icon-float-right_float-right, .primary.icon-float-right_float-left, .primary.icon-float-right_center, .primary.icon-menu {
    color: #002654; }
  .icon-font.active, .active.icon-like, .active.icon-dislike, .active.icon-favorite, .active.icon-undo, .active.icon-wishlist, .active.icon-novote, .active.icon-quote, .active.icon-search, .active.icon-email, .active.icon-comment, .active.icon-guides, .active.icon-blog, .active.icon-review, .active.icon-twitter, .active.icon-gplus, .active.icon-compose, .active.icon-heart, .active.icon-share, .active.icon-share-box, .active.icon-plus, .active.icon-plus-sign, .active.icon-minus-sign, .active.icon-check, .active.icon-map, .active.icon-map-pin, .active.icon-add, .active.icon-ellipsis, .active.icon-compass, .active.icon-star, .active.icon-arrow, .active.icon-pin, .active.icon-footprints, .active.icon-car, .active.icon-globe, .active.icon-home, .active.icon-profilepic, .active.icon-camera, .active.icon-photos, .active.icon-takeout, .active.icon-wifi, .active.icon-link, .active.icon-lines, .active.icon-grid, .active.icon-list, .active.icon-magnify, .active.icon-speechbubble, .active.icon-conversation, .active.icon-phone, .active.icon-arrowdown, .active.icon-arrowright, .active.icon-arrowleft, .active.icon-delivery, .active.icon-facebook, .active.icon-location, .active.icon-megaphone, .active.icon-news, .active.icon-image, .active.icon-bold, .active.icon-italic, .active.icon-numbered-list, .active.icon-thumbs-up, .active.icon-thumbs-down, .active.icon-file-xml, .active.icon-add-image, .active.icon-float-right_float-right, .active.icon-float-right_float-left, .active.icon-float-right_center, .active.icon-menu {
    color: #ffc52e; }
  .icon-font.big, .big.icon-like, .big.icon-dislike, .big.icon-favorite, .big.icon-undo, .big.icon-wishlist, .big.icon-novote, .big.icon-quote, .big.icon-search, .big.icon-email, .big.icon-comment, .big.icon-guides, .big.icon-blog, .big.icon-review, .big.icon-twitter, .big.icon-gplus, .big.icon-compose, .big.icon-heart, .big.icon-share, .big.icon-share-box, .big.icon-plus, .big.icon-plus-sign, .big.icon-minus-sign, .big.icon-check, .big.icon-map, .big.icon-map-pin, .big.icon-add, .big.icon-ellipsis, .big.icon-compass, .big.icon-star, .big.icon-arrow, .big.icon-pin, .big.icon-footprints, .big.icon-car, .big.icon-globe, .big.icon-home, .big.icon-profilepic, .big.icon-camera, .big.icon-photos, .big.icon-takeout, .big.icon-wifi, .big.icon-link, .big.icon-lines, .big.icon-grid, .big.icon-list, .big.icon-magnify, .big.icon-speechbubble, .big.icon-conversation, .big.icon-phone, .big.icon-arrowdown, .big.icon-arrowright, .big.icon-arrowleft, .big.icon-delivery, .big.icon-facebook, .big.icon-location, .big.icon-megaphone, .big.icon-news, .big.icon-image, .big.icon-bold, .big.icon-italic, .big.icon-numbered-list, .big.icon-thumbs-up, .big.icon-thumbs-down, .big.icon-file-xml, .big.icon-add-image, .big.icon-float-right_float-right, .big.icon-float-right_float-left, .big.icon-float-right_center, .big.icon-menu {
    font-size: 18px;
    vertical-align: -2px;
    padding-right: 5px; }
  .icon-font.huge, .huge.icon-like, .huge.icon-dislike, .huge.icon-favorite, .huge.icon-undo, .huge.icon-wishlist, .huge.icon-novote, .huge.icon-quote, .huge.icon-search, .huge.icon-email, .huge.icon-comment, .huge.icon-guides, .huge.icon-blog, .huge.icon-review, .huge.icon-twitter, .huge.icon-gplus, .huge.icon-compose, .huge.icon-heart, .huge.icon-share, .huge.icon-share-box, .huge.icon-plus, .huge.icon-plus-sign, .huge.icon-minus-sign, .huge.icon-check, .huge.icon-map, .huge.icon-map-pin, .huge.icon-add, .huge.icon-ellipsis, .huge.icon-compass, .huge.icon-star, .huge.icon-arrow, .huge.icon-pin, .huge.icon-footprints, .huge.icon-car, .huge.icon-globe, .huge.icon-home, .huge.icon-profilepic, .huge.icon-camera, .huge.icon-photos, .huge.icon-takeout, .huge.icon-wifi, .huge.icon-link, .huge.icon-lines, .huge.icon-grid, .huge.icon-list, .huge.icon-magnify, .huge.icon-speechbubble, .huge.icon-conversation, .huge.icon-phone, .huge.icon-arrowdown, .huge.icon-arrowright, .huge.icon-arrowleft, .huge.icon-delivery, .huge.icon-facebook, .huge.icon-location, .huge.icon-megaphone, .huge.icon-news, .huge.icon-image, .huge.icon-bold, .huge.icon-italic, .huge.icon-numbered-list, .huge.icon-thumbs-up, .huge.icon-thumbs-down, .huge.icon-file-xml, .huge.icon-add-image, .huge.icon-float-right_float-right, .huge.icon-float-right_float-left, .huge.icon-float-right_center, .huge.icon-menu {
    font-size: 24px;
    vertical-align: -11px;
    padding-right: 5px; }

a[class*="icon"],
a > [class*="icon"] {
  color: #aaaaaa; }
  a[class*="icon"]:hover,
  a > [class*="icon"]:hover {
    text-decoration: none; }

.icon-like:before {
  content: "\75"; }

.icon-dislike:before {
  content: "\64"; }

.icon-star:before,
.icon-favorite:before {
  content: "\73"; }

.icon-heart:before,
.icon-wishlist:before {
  content: "\68"; }

.icon-add:before,
.icon-novote:before {
  content: "\e009"; }

.icon-quote:before {
  content: "\22"; }

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

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

.icon-gplus:before {
  content: "\27"; }

.icon-compose:before {
  content: "\6e"; }

.icon-email:before {
  content: "\26"; }

.icon-share:before {
  content: "\21";
  font-size: 14px; }

.icon-share-box:before {
  content: "\2b"; }

.icon-plus:before {
  content: "\70"; }

.icon-plus-sign:before {
  content: "\24"; }

.icon-minus-sign:before {
  content: "\23"; }

.icon-check:before {
  content: "\6b"; }

.icon-map:before {
  content: "\6d"; }

.icon-map-pin:before {
  content: "\2c"; }

.icon-guides:before {
  content: "\67"; }

.icon-ellipsis:before {
  content: "\2e"; }

.icon-arrow:before {
  content: "\61"; }

.icon-pin:before {
  content: "\e00e"; }

.icon-footprints:before {
  content: "\66"; }

.icon-car:before {
  content: "\43"; }

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

.icon-home:before {
  content: "\48"; }

.icon-profilepic:before {
  content: "\e013"; }

.icon-camera:before {
  content: "\79";
  font-size: 15px;
  vertical-align: -2px; }

.icon-photos:before {
  content: "\e015"; }

.icon-takeout:before {
  content: "\62"; }

.icon-wifi:before, .icon-blog:before {
  content: "\72"; }

.icon-link:before {
  content: "\6c"; }

.icon-lines:before {
  content: "\e019";
  font-size: 20px;
  color: white; }

.icon-grid:before {
  content: "\47"; }

.icon-list:before {
  content: "\4c"; }

.icon-magnify:before {
  content: "\71"; }

.icon-speechbubble:before, .icon-comment:before {
  content: "\63"; }

.icon-conversation:before {
  content: "\44"; }

.icon-phone:before {
  content: "\25"; }

.icon-arrowdown:before {
  content: "\56";
  font-size: 10px;
  color: #666666; }

.icon-arrowright:before {
  content: "\4e"; }

.icon-arrowleft:before {
  content: "\50"; }

.icon-delivery:before {
  content: "\4b"; }

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

.icon-location:before {
  content: "\4d"; }

.icon-megaphone:before {
  content: "\57"; }

.icon-news:before, .icon-review:before {
  content: "\5a"; }

.icon-image:before {
  content: "\2a"; }

.icon-bold:before {
  content: "\2b"; }

.icon-italic:before {
  content: "\2c"; }

.icon-numbered-list:before {
  content: "\2d"; }

.icon-list:before {
  content: "\4c"; }

.icon-thumbs-up:before {
  content: "\55"; }

.icon-thumbs-down:before {
  content: "\30"; }

.icon-file-xml:before {
  content: "\35"; }

.icon-add-image:before {
  content: "\2f"; }

.icon-redo:before {
  content: "\21"; }

.icon-undo:before {
  content: "\29"; }

.icon-float-right_float-right:before {
  content: "\31"; }

.icon-float-right_float-left:before {
  content: "\32"; }

.icon-float-right_center:before {
  content: "\33"; }

.icon-menu:before {
  content: "\34"; }

SassMeister-rendered.html

<h2>Urbanspoon Font file Instructions</h2>

<ol>
<li>copy this the <em>urbanspoon</em>icon.sass file</li>
<li>goto <a href="http://sassmeister.com/gist/9399236">http://sassmeister.com/gist/9399236</a></li>
<li>paste the <em>urbanspoon</em>icon.sass file into the sass paine
to replace everything below the comments.
from line 32.</li>
<li>Copy the css paine and paste that back into the stlyes.css file in the urbanspoon fonts folder.</li>
<li>Please make sure you dont remove the comments.</li>
<li>View the index.html file in the browser.</li>
</ol>