Pictos icons

Pictos icons for the Rails asset pipeline. Extracted from Sencha Touch GNU license framework. The sprite icons come in the following sizes:

Install via Rails asset pipeline

Simply require the css (or scss) stylesheet in your stylesheet manifest, fx app/assets/stylesheets/application.css

/*
 *= require pictos
 *= require pictos-15
 *= require pictos-30
 *= require pictos-60
*/

Usage

Use like this:

<ul class='p30.pictos'>
  <li class='pic action'></li>
</ul>

<ul class='p15.pictos'>
  <li class='pic search'></li>
</ul>

Or in HAML

%ul.p60.pictos
  %li.pic.action
  %li.pic.search

You don’t have to use an unordered list with list items, but it gives a nice result. You simply have to ensure that you are using block elements that can take a background image ;).

See the world-flags gem for more info, tips etc.

Auto Resize

This gem also includes a sprite utility: lib/tools/resize_css.rb for generating sprite sets of different sizes :)

Usage example

$ cd lib/pictos-icons/tools/
$ edit resize_css.rb # change the run arguments at the bottom!
$ ruby resize_css.rb

TODO: Make resize tool into a rake task or similar which can take arguments!

Contributing to pictos-icons

Copyright © 2012 Kristian Mandrup. See LICENSE.txt for further details. (Icons extracted from Sencha Touch 2 GNU version)