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

• itsaicon-users-add
• itsaicon-users-dislike
• itsaicon-users-download
• itsaicon-users-love
• itsaicon-users-love-transparent
• itsaicon-users-like
• itsaicon-users-remove
• itsaicon-users-remove-round
• itsaicon-users-star
• itsaicon-users-star-transparent
• itsaicon-users-upload
• itsaicon-users-user
• itsaicon-users-users
• itsaicon-users-whois

Usage

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.

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.

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