CSS Classes and issues with alignment

[saltnpixels]

Thanks for making this!

I think life would be easier if the svg had a class of the icon name?
Instead we have to use
svg[data-icon="ic:round-access-time"]

which is much harder to write than:
.ic-round-access-time

And most of the time I wrap the svg in a span. Would be nice if there was a way to auto wrap it with data-wrap="span" or something. And the span can have the class.

Last, when using the inline method I find that the icon is randomly off here and there... its strange..

Notice the top one is different than the lower ones. All have the same markup and css.

For now I am setting inline false and using css to move it around.

[cyberalien]

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.

[cyberalien]

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?

[saltnpixels]

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?

[cyberalien]

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.

[cyberalien]

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.

[cyberalien]

Version 2.0.0-beta.1 has been published.

It has all changes mentioned above.

[saltnpixels]

nice. Thanks