Semantic-ui: make icon appear on left in vertical menu item

[jmls]

so, I have the following menu :

<div class="ui inverted left fixed vertical menu">
  <a class="item"><i class="icon table"></i>tables</a>
  <div class="item">
    <div class="header">Hosting</div>
    <div class="menu">
      <a class="item">Shared</a>
      <a class="item">Dedicated</a>
    </div>
  </div>
  <div class="item">
    <div class="header">Support</div>
    <div class="menu">
      <a class="item">E-mail Support</a>
      <a class="item">FAQs</a>
    </div>
  </div>
</div>

which gives me this ..

However, I would like the icon on the left of the label - but can't seem to find the words (!) to get it to move to the left

What is the magic incantation / chicken-bone throwing thing I have to do in order to get the icon on the left ? ;)

First-time semantic-ui user, so perhaps I'm missing something _really_ simple

thanks!

[awgv]

@jmls

Not sure if you still need it, but anyway—I think you’ll have to write your own CSS to add this. Something like that.

[nukturnal]

Add the following CSS

.ui.vertical.menu .item > i.icon.left {
    float: none;
    margin: 0em 0.35714286em 0em 0em;
}

and modify icon tag by adding left to the class as shown below

<div class="ui inverted left fixed vertical menu">
  <a class="item"><i class="left icon table"></i>tables</a>
  <div class="item">
    <div class="header">Hosting</div>
    <div class="menu">
      <a class="item">Shared</a>
      <a class="item">Dedicated</a>
    </div>
  </div>
  <div class="item">
    <div class="header">Support</div>
    <div class="menu">
      <a class="item">E-mail Support</a>
      <a class="item">FAQs</a>
    </div>
  </div>
</div>