Center Text with FontAwesome Icon

Question

I have a very simple situation that I can't seem to resolve. I want to centre the text vertically to the FontAwesome icon. But I can't for the life of me figure out why it's not centering.

I have tried other answers but none seen to utilise the :before CSS definition which is a very accepted way to implement icons.

Here's my code:

#rk-lesson-menu {
    display: inline-block;
    width: 100px;
    height: 60px;
    float: right;
    text-align: center;
    border-left: 1px solid #DDD;
    line-height: 60px;
    vertical-align: middle;
    text-decoration:none
}
#rk-lesson-menu:before {
    font: 28px/60px fontawesome;
    content: "\f0c9";
    padding-right: 3px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

@Temani Afif this is not a duplicate question. You can clearly see in the questions you have referenced that the images or icons are being displayed in a alternative way none utilise the : before CSS definition therefore the question is unique and could benefit other users. — Zac, Feb 26 '19 at 04:42
so considering your logic, If someone else ask the same question and use `:after` instead of `:before` then it will also be a different question? no, it will remain a duplicate like this one and you can clearly see from the answer you accepted that the solution is the same which make it a perfect duplicate. We don't judge a duplicate based on the code but on the main issue. You want to vertical align a text with an icon/image and the solution is the same whataver the way you wrote it --> "you need to apply the vertical align to the icon" — Temani Afif, Feb 26 '19 at 07:47
From the duplicate question : `do not play with the vertical-align of your text play with the vertical align of the font-awesome icon`. There is nothing related to how the font-awesome is added, so the solution will work with span/div/:before/:after. etc ... also note that your question is closed and not deleted so user can still see it and it can benefit other users — Temani Afif, Feb 26 '19 at 07:48

score 1 · Accepted Answer · answered Feb 25 '19 at 03:05

Instead of adding vertical-align: middle to the <a> element, you need to apply it to the :before element itself:

#rk-lesson-menu {
  display: inline-block;
  width: 100px;
  height: 60px;
  float: right;
  text-align: center;
  border-left: 1px solid #DDD;
  line-height: 60px;
  text-decoration: none;
}

#rk-lesson-menu:before {
  font: 28px/60px fontawesome;
  content: "\f0c9";
  padding-right: 3px;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

Perfect. Works like a charm. Can't believe I didn't try this earlier. — Zac, Feb 26 '19 at 04:44

henser · Answer 2 · 2019-02-25T05:10:18.930

Just use flexbox instead and add align-items: center and justify-content: center.

This way you don't need to define vertical-align, line-height nor text-align.

#rk-lesson-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    float: right;
    border-left: 1px solid #DDD;
    text-decoration:none
}
#rk-lesson-menu:before {
    font: 28px/60px fontawesome;
    content: "\f0c9";
    padding-right: 3px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

Center Text with FontAwesome Icon

2 Answers2