[solved] Header with Icon to the right of the text



I want to be able to put some “information” type hover item to the right of my header text, but every time I put an icon after any text, it drops on to the following line.

It’s not the second icon that gets pushed down, but only ones after the text. For example, I can put as many icons before the text, and they will all be inline with the icon.

Does someone know how I Can achieve this?

Code I’m using

<div class="ui header primary inverted">
    <i class="icon address card ember-view"></i>
    My Identifiers
    <i class="blue large icon info circle ember-view"></i>

Anyone know if this is possible, and if so how?


I have managed to resolve this issue now. The resolution was in the CSS - where I added:

.grid .ui.header > .icon{
    display: inline-block;
    padding-top: 0;

for some reason unknown to me (someone may be able to elaborate as to why) the icon within a header has the display as table-cell.


wrap the icon in tags.