Semantic-Org / UI-Icon

An icon is a glyph used to represent a concept
http://semantic-ui.com/elements/icon.html
17 stars 21 forks source link

Circular / bordered + size not works #4

Open tunnckoCore opened 9 years ago

tunnckoCore commented 9 years ago

This not works if you are using this module as single.

<link rel="stylesheet" href="https://cdn.rawgit.com/Semantic-Org/UI-Icon/master/icon.min.css">
<i class="circular users huge icon"></i>
<i class="bordered users huge icon"></i>

http://jsbin.com/vuboxa/1/edit?html,output

tunnckoCore commented 9 years ago

Hm. It seems that SUI uses Normalize v3.0.1, but that's not fully a truth. Replacing UI-Reset with the normalize v3.0.1 from the git repo, not fixes the problem.

And I just want to use pure latest Normalize with the just UI-Icon, is that possible and what is the exact conflict?

tunnckoCore commented 9 years ago

It seems that if i.bordered.icon and i.circular.icon line-height is set to line-height:2!important; it just works as expected and not need of the UI-Reset which in meantime i cant understand why not just normalize.css without custom edit it.

The only thing that it adds to the normalize v3.0.1 is

/* Border-Box */
*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

/* iPad Input Shadows */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;

/* mobile firefox too! */
}

and clearing few browser prefixes which are cleared in Normalize v3.0.3

So yea :)