CSS Classes and issues with alignment about iconify HOT 7 CLOSED

I've been thinking of how to disable inline mode in a more elegant way in upcoming version 2 of project and would love to hear your feedback since you are facing related issue.

Current idea:

• <span class="iconify" /> - icon with inline mode
• <span class="iconify-icon" /> - icon without inline mode

With that implementation data-inline attribute becomes irrelevant, though still available. I think it would make syntax cleaner. What do you think?

from iconify.

In version 2 icons will have class names that match prefixes, such as iconify--ic.

You can also add custom classes to placeholder, for example <span class="iconify time-icon"></span>, so instead of targeting icon by name, you can target icon by class name .time-icon {}.

Inline method should behave the same everywhere. All it does is adds vertical-align to style. It does depend on an icon, for example, icons imported from icon fonts such as FontAwesome 4 have weird vertical alignment to match behaviour of font. This will also be cleaned up in version 2.

from iconify.

I can add my own classes? I think I tried that and my classes disappeared. I’ll try again.

As for the cleanup maybe classes like:
iconify-inline

Or you want inline to be the default with extra text for non inline?

from iconify.

You should be able to add your own classes. If not, its a bug that I'll need to fix. Adding classes definitely works in version 2 that is currently in development.

Using iconify-inline makes sense, however there is a problem with backwards compatibility. If iconify class would default to non inline icon, it would require version 1 users to change syntax. So I'm thinking of keeping iconify class as default for inline icon and adding different class that would default to non inline.

from iconify.

Tested custom classes - they do work correctly. So you can add custom classes to placeholders and use those classes to target specific icons in css.

from iconify.

Version 2.0.0-beta.1 has been published.

It has all changes mentioned above.

from iconify.

nice. Thanks

from iconify.