Pictos (Free)

After WooThemes discovered Drew Wilson and his amazing work on Dribbble, they decided to contact him about working with the WooTeam to bring some of that awesomeness over there. The result is a free, vector icon set which contains 21 icons perfectly suited for your blogging needs.

For a quick and super simple example, check out pictosfree.heroku.com or the example code.

Pictos Free requires the usage of Compass and Sass and is delivered as a Ruby gem. If you are not yet setup to work with Compass and Sass, please see the getting started guide at The Sass Way.

(sudo) gem install pictos-free

Next, we need to require Pictos Free in the Compass config file of your project.

require 'pictos-free'

Next is a very crucial step ... getting the icons installed to your project. This is the step you'll get hung up on if you didn't do the previous steps. Head back to the terminal and run this command from the root of the project you're installing Pictos Free to.

# execute at the root of your project
compass install pictos-free/icons

You should see something like this:

-> % compass install pictos-free/icons
identical public/images/pictos-free-black/icn1.png 
...
identical public/images/pictos-free-white/icn6.png 
identical public/images/pictos-free-white/icn7.png 
identical public/images/pictos-free-white/icn8.png 
identical public/images/pictos-free-white/icn9.png 
   create License.txt 
   remove .sass-cache/ 
   remove public/stylesheets/stylesheet.css 
   create public/stylesheets/stylesheet.css 

Once you've done this, your project will be ready to use Pictos Free! The next step is to "mixin" Pictos Free which is covered in the usage section.

If you know how to use Compass Sprites, you know how to use Pictos Free. Right now, only 72px black and white versions of the icons are included. If you'd like to use other sizes, feel fork this project, add the new versions and send a pull request.

All you need to do is @import the white or black version and Compass takes care of the rest. Oh, and you MUST have the Pictos icons installed.

Here's an example snippet of Sass to show how it can be used:

// Pictos Free (white)
$pictos-free-white-spacing: 50px
@import "pictos-free-white"

Copyright (c) 2009-2011 Adam Stacoviak

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.