{{description}}

Notes:

{{>getting-started}}

Description

By adding this module, you have some classnames at your proposal, which can be used to create icons. The css only works if you define an empty i-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. Iconfonts-modules have are relative big-sized. To speed up initial loading, it is advizable to load the css-modules in a second separate Y.use() statement without a callback.

Available iconclasses

Usage

```html ``` ```js YUI(yuiconfig).use('yui-base', function(Y) { Y.use('gallerycss-itsa-base', 'gallerycss-itsa-special'); // 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-special-battery-full: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-special-battery-full: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