Designed for Agile Toolkit
Icons are an important detail of every website's or web application's UI and that is why we have designed our own icon set for the Agile Toolkit framework. The icon set consists of 128 icons in 16x16 pixel size with a multiple background shape choice. Within seconds you are able to create your own icon set that will match your design requirements.
Using the icon set in Agile Toolkit
Agile Toolkit is a Web UI and back-end library. It brings a number of visual objects into PHP5 such as Buttons, Forms, Tables, Menus, Trees etc. It focuses on development flexibility and helps web developers write less code.
Our icon-sets are already integrated with Agile Toolkit. In order to use the icon set, you can use "Icon" class in your code.
We also have a demonstration.
Create your own set of icons
To create your own icon set read the detailed guide below, it can surely help developers and Photoshop beginners:
Open up agile-toolkit-128x16x16.psd from the ZIP package. You will notice that there are several icon sets prepared with different background shapes; circles, squares, rounded squares etc.
Each icon set has its own layer group, so choose the most suitable set for you, then open the BG SHAPE layer folder, select one of the shape layers and apply blending options you want.
Copy the layer style and paste it to all the shape layers within a folder.
The icon set is designed and ready to be exported. Hide the background layer so the whole document is transparent, afterwards open the Save For Web dialog and select the slice with your icon set, next – open Slice Options and name the slice. Save it in your project's folder.
Copy atk-icons.css file to your project's folder and specify it in <head> tag of your HTML file:
<link src="atk-icons.css" rel="stylesheet" type="text/css" />
Open your website's .css file and insert this line of code:
Create your first icon by placing the following HTML code:
<i class="atk-icon atk-icons-red atk-icon-basic-search"></i>
Voilà, here is your icon – Google it!
If the icon needs to be placed on the right, use additional class 'atk-icon-right'.