{{description}}

Notes:

{{>getting-started}}

Description

By adding this module, you have some classnames at your proposal, which can be used to create icons. The best way to create an icon, is by defining a li-element and add the right class to it. Typically the icons are inside a button-element but this is not required.

Be aware of the load-delay: if you use progressive enhancement, you might want the nodes to be invisible until loading has finished.

Available iconclasses

Note1 :itsaicon-form-load is the same icon as itsaicon-form-loading, with the exeption that itsaicon-form-loading has !important active. This way you can use itsaicon-form-loading to force this icon to be present.
Note2 :itsaicon-form-loading does not work in IE7.

Usage

```html ``` ```js YUI(yuiconfig).use('yui-base', function(Y) { Y.use('gallerycss-itsa-base', 'gallerycss-itsa-form'); // now the iconfonts will load asynchroniously // code can be executed ... }); ```

Changing size

Iconfonts are handled as regular characters. The font size is detemined by the calculated font-size value of the element. To change the icon-size, you need to change the font-size.

The iconfont has its definition inside .itsaicon-iconname:before. You can set a fontsize here, or at a ancestor-node, depending what needs to be set.

```css button { font-size: 120%; } .itsaicon-form-yes:before { font-size: 150%; } ```

Changing color

Iconfonts are handled as regular characters. The iconcolor is detemined by the calculated color-value of the element. To change the icon-color, you need to change the color of the icon.

The icon-color has its definition inside .itsaicon-iconname:before. You can set a color here, or at a ancestor-node, depending what needs to be set.

```css button { color: #F00; } .itsaicon-form-yes:before { color: #0F0; } ```

Creating imagebuttons (purecss compatible)

Imagebuttons can be created by creating a button and add an empty i-element inside. To be sure the space arround the iconfont gets right, you need to add the right classname to the button as well.

These iconfonts work perfectly well with pure-css. So you can add the class pure-button to the button-element. But you don't need to.

Iconbuttons without text

```html ```

Textbuttons with a left-icon

```html ```

Textbuttons with a right-icon

```html ```

Rounded buttons with a border

Bordered and rounded buttons can be made by using special button-classes supllied by gallerycss-itsa-base.

```html ```

Licences

Copyright (c) 2013 Its Asbreuk
Copyright (c) 2013 YUI BSD License

Font licence info