legacy-icons/famfamfam-mini

FamFamFam Mini icon pack, as individual icons or as a CSS spritesheet

famfamfam-mini

, _(*1)

, _(*2)

About

The Mini icon pack, as available on famfamfam website., _(*3)

All credits for these icons go to their original author: Mark James (mjames@gmail.com), _(*4)

The aim of this project is to make this icon pack available through various package managers, such as:, _(*5)

• NPM
• Bower
• Packagist
• NuGet

All icons are supplied in GIF format., _(*6)

CSS spritesheets

You can insert the icons directly into your HTML with a common IMG tag:, _(*7)

<img alt="Refresh" src="dist/gif/action_refresh_blue.gif" width="16" height="16">

In addition to the icons by themselves, this project also ships a CSS spritesheet for the icon-pack. This spritesheet allows to load the entire icon-pack in just 1 image, and thus reduce HTTP calls., _(*8)

This is what it actually looks:, _(*9)

, _(*10)

All the positioning of the icons inside this alone image is made through CSS, which allows you to just add block-type tags with the proper class and get the same result:, _(*11)

<div class="famfamfam-mini action_refresh_blue"></div>

Just remember to add the CSS stylesheet to the HEAD of your HTML page!, _(*12)

Install

Get the package with NPM, _(*13)

npm install famfamfam-mini, _(*14)

Get the package with Bower, _(*15)

bower install famfamfam-mini, _(*16)

Get the package with Composer / Packagist, _(*17)

composer require legacy-icons/famfamfam-mini, _(*18)

Get the package with NuGet, _(*19)

Install-Package famfamfam-mini, _(*20)

Build the whole project or your custom project

We use Gulp to build the project, so if you want to re-build or customize this project, you'll need Gulp., _(*21)

After gulp is installed, and your CLI is pointed to your work directory, first install the dependencies:, _(*22)

with NPM 2.x.x, _(*23)

npm install, _(*24)

with NPM 3.x.x (resolve dependencies for node-spritesheet before this module's ones), _(*25)

npm install grunt grunt-contrib-coffee grunt-contrib-clean, _(*26)

npm install, _(*27)

then be sure that you have ImageMagick installed for building spritesheet., _(*28)

then, you can run the gulp build task to build the project:, _(*29)

gulp build, _(*30)

What the build task does?

First, it copies GIF files from the src folder, and pastes them to the dist folder., _(*31)

Then it creates a spritesheet from the GIF images located in the src folder, and thus creates the sprite folder in dist., _(*32)

If, for example you just want action_stop and page_right icons in a spritesheet, you just have to fork this project, point your CLI to the working directory, empty the src directory, except action_stop and page_right icons in GIF format, and then run the gulp build task., _(*33)

You'll get the proper spritesheet and copies of the icons directly in the dist folder., _(*34)