CODEWITHSUNDEEP
htmlcssfont-awesome
Cakers
Cakers

Reputation: 655

How to align font awesome icon to the right in a list of links?

I am trying to get my bottom borders and my arrows to all fill the parent div and be lined up on the right. I want them to look like this in all views not just when it's mobile.

enter image description here

I believe there's an issue with the div not going 100% but I just cannot seem to figure it out.

Here is the JS Fiddle I created: https://jsfiddle.net/e9uv08wh/2/

a {
  color: #544f47;
  height: 3.4em;
  display: block;
  display: table-cell;
  vertical-align: middle;
  width: 25%;
  font-weight: normal;
  padding-left: 1em;
  border-bottom: .0625em solid #544f47;
}

i.fa.fa-chevron-right {
  float: right;
  margin-right: .5em;
  padding-top: .3em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>

<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>

<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span>

<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>

<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

CSS:

Upvotes: 1

Views: 4969

Answers (3)

Stickers
Stickers

Reputation: 78676

I suggest to use semantic markup, and use flexbox for simplicity. It also works good when the text wraps, and the icon remains vertically centered.

.list {
  padding-left: 0;
  width: 30%;
}

.list li {
  list-style: none;
}

.list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  border-bottom: 1px solid;
  color: black;
}

.list a:after {
  display: inline-block;
  padding-left: 10px;
  font-family: FontAwesome;
  content: "\f054";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="list">
  <li><a href="#">Link text example</a></li>
  <li><a href="#">The quick brown fox jumps over the lazy dog</a></li>
</ul>

Upvotes: 2

roest
roest

Reputation: 376

try to prevent display:table-cell.
It's more a workarount when you migrate code from a table to div.

Using line-height to vertical align your text does the job verry well.

What i've done:

  • removed display table-cell with display block
  • gave a line height
  • gave icon line height

you still have to deal with responsive problems when your text is longer than your cell.

Result:

    a {        
        color: #544f47;
        height: 3.4em;
         width: 30%;
        font-weight: normal;
        padding-left: 1em;
        border-bottom: .0625em solid #544f47;
         line-height: 3.4em;
         display: block;
     }

     i.fa.fa-chevron-right {
         float: right;
         margin-right: .5em;
         padding-top: .3em;
          line-height:3em;
     }
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> 
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

Upvotes: 2

Andrew Chan
Andrew Chan

Reputation: 91

If you want to make it look like above, you can just give the width a set px, like so:

    a{
    
    color: #544f47;
    height: 3.4em;
    display: block;
    vertical-align: middle;
    width: 40%;
    font-weight: normal;
    padding-left: 1em;
    border-bottom: .0625em solid #544f47;
}

i.fa.fa-chevron-right {
    float: right;
    margin-right: .5em;
    padding-top: .3em;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> 
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

Upvotes: 0

Related Questions