Facades

Front-end awesomeness, with Compass and SASS

Accessible Font-Face Icons class names optional

Facades includes a @font-face friendly icon set, using the unicode private range (U+e00+) for all of its glyphs. This way you can join in on all of the font-icon madness like the other cool kids do, but in a screen-reader friendly manner. Since icons aren't mapped to standard letters/numbers/punctuation, a icon mixin is included.

If you'd like to have all of the classes below, you can include the icon-classes mixin in your top-level stylesheet.

// The icon-classes takes a single argument which represents the selector to 'scope' all icons to.
@include icon-classes("span.icon")

.add-document .align-center .align-left .align-right .arrow-down .arrow-down-dark .arrow-down-light .arrow-left .arrow-left-dark .arrow-left-light .arrow-right .arrow-right-dark .arrow-right-light .arrow-up .arrow-up-dark .arrow-up-light .bar-chart .battery .battery-charging .battery-full-charge .battery-half-charge .binder .book .calendar .camera .cancel .cart .check .check-dark .check-light .clock .comment .comment-dark .delete .delete-document .delete-round .document .edit-document .eject .facebook .facebook-dark .fast-forward .flag .folder .folder-open .gear .gift .globe .headphones .heart .image .info .iphone .ipod .link .lock .mail .mail-open .maximize .minimize .minus .minus-round .paperclip .pause .pencil .person .pie-chart .pin .play .play-button .plus .plus-round .print .push-pin .quote-left .quote-right .refresh .reload .rewind .ribbon .rss .rss-dark .scissors .search .spinner .star .stop .tag .tag-alt .tools .transfer .trash .twitter .twitter-dark .unlock .vcard .volume-high .volume-low .volume-off .warning .wrench .zoom-in .zoom-out

Block Style Icons for square dimensions

.icon-16 16x16

add-document align-center align-left align-right arrow-down arrow-down-dark arrow-down-light arrow-left arrow-left-dark arrow-left-light arrow-right arrow-right-dark arrow-right-light arrow-up arrow-up-dark arrow-up-light bar-chart battery battery-charging battery-full-charge battery-half-charge binder book calendar camera cancel cart check check-dark check-light clock comment comment-dark delete delete-document delete-round document edit-document eject facebook facebook-dark fast-forward flag folder folder-open gear gift globe headphones heart image info iphone ipod link lock mail mail-open maximize minimize minus minus-round paperclip pause pencil person pie-chart pin play play-button plus plus-round print push-pin quote-left quote-right refresh reload rewind ribbon rss rss-dark scissors search spinner star stop tag tag-alt tools transfer trash twitter twitter-dark unlock vcard volume-high volume-low volume-off warning wrench zoom-in zoom-out

Facades

Front-end awesomeness, with Compass and SASS

Accessible Font-Face Icons class names optional

Block Style Icons for square dimensions

.icon-16 16x16

.icon-24 24x24

.icon32 32x32