Semantic UI – Separate Button Groups By An Icon

I am sure that I don’t need to say how great that Semantic UI framework is. Now I’ll explain how easy you replace the regular text (or) with an icon.

Here’s the example from the website

<div class="ui buttons">
  <div class="ui button">Cancel</div>
  <div class="or"></div>
  <div class="ui positive button">Save</div>
</div>

If we now inspect the HTML code on the website (DevTools, Firebug…), we will see that the .or class has with ::before a selector which use the pseudo-element content:'or'; which is responsible for the text or between the buttons.

Now we replace the text by an icon

Fortunately for us, the framework has already been declared the declarations @font-face we need for an icon.

// Standard Icon Set (Including Font Awesome)
@font-face {
  font-family: 'Icons';
  src: url(../fonts/icons.eot);
  src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.svg#icons) format('svg'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}
...
// Custom Icon Set
@font-face {
  font-family: 'Basic Icons';
  src: url(../fonts/basic.icons.eot);
  src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

On the icons page of Semantic UI, you become a quick overview which icons you can use. Since I don’t want to use the basic icons, I visit the Font Awesome website and choose the icon with the vertically aligned arrows on both sides.

What we now have to do is to extend the CSS class .or by adding the property @font-face. The content:'or'; with the ::before selector becomes a Unicode character. The Unicode character f07e we will find among the exemplary sizes of that icon single-page and place it with a backslash before content:'f07e';.

.ui.buttons .or {
    font-family: 'Icons';
}
.ui.buttons .or::before {
    // hexadecimal unicode
    content: 'f07e';
}

button-group-seperated-with-an-icon

This result looks quite good, but we should adjust the position of the arrows. Currently, the arrows are too far above. By adjusting the, line-height it looks much better now.

.ui.buttons .or {
    font-family: 'Icons';
}
.ui.buttons .or::before {
    // hexadecimal unicode
    content: 'f07e';
    line-height: 1.7;
}

button-group-seperated-with-an-icon-aligned

PS: A very good overview of the icons (including the Unicode chars!) you will find on the cheatsheet page.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn