title: Right align fontawesome icon on li
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt; &lt;i class="fa fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 2 is longer&lt;/a&gt; &lt;i class="fa fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt; &lt;i class="fa fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It appears like this (<a href="https://jsfiddle.net/hns0rp6p/" rel="nofollow noreferrer">jsfiddle</a>):</p>
  
  <p><a href="https://i.stack.imgur.com/JRiSC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRiSC.png" alt="enter image description here"></a></p>
  
  <p>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 <code>&lt;a&gt;</code> tag. I've mocked this up in Fireworks but it shows the idea of what I'm trying to do:</p>
  
  <p><a href="https://i.stack.imgur.com/MDC2n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MDC2n.png" alt="enter image description here"></a></p>
  
  <p>How is this possible? I am also using Bootstrap 3.3.7 but not sure if any utilities or classes in there would help.</p>
  
  <p>I've tried putting a width on the <code>&lt;a&gt;</code> elements, but obviously that's quite restrictive and doesn't work well responsively.</p>