Icons are not aligned correctly #4879

Open
romaninsh opened this Issue Jan 3, 2017 · 3 comments

Projects

None yet

4 participants

@romaninsh

Looking at this page, last example: http://semantic-ui.com/elements/button.html

Icons does not appear to be aligned correctly:

screen shot 2017-01-03 at 10 00 04

After mentioning it on Gitter, @Banandrew has recommended to report it here.

@romaninsh you’re right, haven’t noticed it before. I think you found a bug, because the rule for icon buttons looks like this:

.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  opacity: @iconButtonOpacity;
  margin: 0em;
  vertical-align: top;
}

But its margin gets overwritten with this rule that needs to be expanded/overwritten to include the grouped variation:

.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
  margin: @iconMargin;
}

If you need a temporary workaround, you can remove the .icon class from the container, and apply it to every child element to make it work again:

<div class="ui small basic buttons">
  <button class="ui icon button"><i class="file icon"></i></button>
  <button class="ui icon button"><i class="save icon"></i></button>
  <button class="ui icon button"><i class="upload icon"></i></button>
  <button class="ui icon button"><i class="download icon"></i></button>
</div>
@ktmn
ktmn commented Jan 5, 2017

These look a bit off-center as well http://i.imgur.com/ZkSYzs8.png

@Banandrew

@ktmn I think it’s intentional, the framework sort of gives you an ability to combine icons in groups, so the rules are already there, and I feel like it’s rather pointless to have rules for every icon combination out there, considering how easy it is to tweak the existing ones if you really need it.

@alecpl
alecpl commented Jan 8, 2017

They aren't aligned correctly even if you not use buttons. The font is incorrect. And it looks like this is font-awesome issue. Just compare http://fontawesome.io/icon/download/ and http://fontawesome.io/icon/upload/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment