search

jkphl / iconizr

A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output. Created by Joschi Kuphal (@jkphl), licensed under the terms of the MIT license
http://iconizr.com
MIT License
485 stars 36 forks source link

Make »regular« icon state explicitly applicable #11

Closed jkphl closed 10 years ago

jkphl commented 10 years ago

At the moment it is impossible to apply the regular state of an icon without implicitly applying it's hover state as well. The regular icon state should be available via a second, independent class name (which has no accompanying :hover pseudo class).

jkphl commented 10 years ago

Starting with version v0.1.2 iconizr adds an additional CSS selector for the regular icon state (which doesn't have a pseudo class by design), so you can also use this icon variant without letting the other pseudo classes become effective:

    icon-foo-bar, icon-foo-bar\:regular { ... }
    icon-foo-bar:hover, icon-foo-bar\:hover { ... }

To apply these icon styles to HTML elements just use them like this:

    <span class="icon-foo-bar:regular">Regular icon state</span>
    <span class="icon-foo-bar:hover">Hover icon state</span>

It may seem weird to use colons als parts of CSS class names, but in fact it's perfectly legal – you just have to escape the colons in your CSS files using a backslash \.