Icons are not aligned correctly #4879

romaninsh opened this Issue Jan 3, 2017 · 3 comments


None yet

4 participants


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>
ktmn commented Jan 5, 2017

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


@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 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