Right align fontawesome icon on li

Question

I have the following markup:


    Link 1 
    Link 2 is longer 
    Link 3

It appears like this (jsfiddle):

What I'm trying to do is "line up" the icons so they appear on the right, regardless of the length of the links in the tag. I've mocked this up in Fireworks but it shows the idea of what I'm trying to do:

How is this possible? I am also using Bootstrap 3.3.7 but not sure if any utilities or classes in there would help.

user_5561605 · Answer

A flexbox approach:

ul {
  width: 10em;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}



    
        Link 1 
        Link 2 is longer 
        Link 3

user_3980621 · Answer

Simply you can use float

li i {
  float : right; 
}

or you can use bootstrap class push-right like this


    Link 2 is longer

user_5328683 · Answer

You can check my snippet:

ul {
  width: 200px;
}

.float-right {
  float: right;
}



    Link 1 
    Link 2 is longer 
    Link 3

user_5641669 · Answer

You could use this CSS - a combination of relative position with fixed with for li and absolute position, right aligned, fo the i tags:

li { 
width: 130px; 
  position: relative;
}
li i {
  position: absolute;
  right: 0;
  bottom: 1px;
}

user_6294039 · Answer

What about giving li's a width with float right on the i elements.

  i {
        float: right;
    }


 li {
    width: 12em;

   }