Semantic-ui: menu: using capitalized 'LEFT' to denote icon position

[MohammadYounes]

By default vertical menu icons are right aligned, but I wanted to have the opposite:

My first attempt was to exclude .left icons from the rule:

.ui.vertical.menu .item > i.icon:not(.left) {
  float: right;
  width: 1.22em;
  margin: 0em 0em 0em 0.5em;
}

It worked for i.settings.icon, but not for i.basic.icon.chart, because i.basic.icon.left (left arrow) is listed after the chart in basic.icon.css.

So I thought about changing the order of icon classes, making all directional icons appear first, but this approach will fail in the case of a .left directional icon that needs to be placed to the right!

How about using capitalized 'LEFT' to denote icon position ?

.ui.vertical.menu .item > i.icon:not(.LEFT){
    float: right;
    width: 1.22em;
    margin: 0em 0em 0em 0.5em;
}
i.icon.LEFT {
  width: auto;
  margin: 0em 0.5em 0em 0em;
}
i.basic.icon.LEFT {
  width: auto;
  margin: 0em 0.5em 0em 0em;
}

This way, I was able to have both:

[Anachron]

Also check my suggestion here https://github.com/Semantic-Org/Semantic-UI/issues/664#issuecomment-35998117

[MohammadYounes]

Nice suggestion, It would make more sense to rename the icons to use north east west south, keeping left/right for positioning .

As east/west are more appropriate for denoting direction, If you take a look at CSS declarations, you'll find they are only used in one place, for defining the cursor (denoting its direction, not position), on the other hand left/right are more appropriate for denoting position.

[Anachron]

Yes, that was my intension. It's going to make it more clear and is also fixing the problem.
I could probably submit a PR, if I find the time after work.

[jlukic]

I think its better solution to implement word order #396 then use obtuse naming conventions, pointing west is unusual phrasing.

This will also be solved by theming, icon position is a variable.

And in general dont be afraid to use your own custom CSS for things like floating and text alignment.

[avitkauskas]

I just put a menu icon and text in a span and the icon stayed on the left, as wanted.

<div class="ui vertical menu">
    <a class="item" href="#">
        <span><i class="grid layout icon"></i>All Items</span>
    </a>
    <a class="item" href="#">
       <span><i class="add square icon"></i>New Item</span>
    </a>
</div>

[ocervell]

The <span> tag makes all the difference.