CODEWITHSUNDEEP
htmlcss
Andy
Andy

Reputation: 5395

Right align fontawesome icon on li

I have the following markup:

<ul>
    <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right"></i></li>
    <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right"></i></li>
    <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right"></i></li>
</ul>

It appears like this (jsfiddle):

enter image description here

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 <a> tag. I've mocked this up in Fireworks but it shows the idea of what I'm trying to do:

enter image description here

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

I've tried putting a width on the <a> elements, but obviously that's quite restrictive and doesn't work well responsively.

Upvotes: 3

Views: 4239

Answers (5)

sol
sol

Reputation: 22919

A flexbox approach:

ul {
  width: 10em;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <ul class="fa-ul">
        <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right"></i></li>
        <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right"></i></li>
        <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right"></i></li>
    </ul>

Upvotes: 7

Dream_Cap
Dream_Cap

Reputation: 2302

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

  i {
        float: right;
    }


 li {
    width: 12em;

   }

Upvotes: 0

Johannes
Johannes

Reputation: 67748

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;
}

https://jsfiddle.net/z9hcub4w/1/

Upvotes: 0

Quoc-Anh Nguyen
Quoc-Anh Nguyen

Reputation: 5056

You can check my snippet:

ul {
  width: 200px;
}

.float-right {
  float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right float-right"></i></li>
    <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right float-right"></i></li>
    <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right float-right"></i></li>
</ul>

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

Simply you can use float

li i {
  float : right; 
}

or you can use bootstrap class push-right like this 

<li>
    <a href="#">Link 2 is longer</a> 
    <i class="fa fa fa-chevron-right push-right"></i>
</li>

Upvotes: 1

Related Questions