Aligning awesom font icons

Question

I am trying to put three fa icons in a line so that they are of equal height. The fact is that they do not look aligned, even if I set their sizes manually (via the font-size property) (I need them to be about 11 pixels). I also tried to change my position for quite some time. And what is the result:

.trash { position: relative; font-size: 11px; } .upload { position: relative; font-size: 11px; } .download { position: relative; top: 1px; font-size: 11px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-download download"></i> <i class="fa fa-upload upload"></i> <i class="fa fa-trash trash"></i> 

Obviously, they are not aligned. Is it possible to make them more even? I know that similar questions have already been asked, but they really did not help me.

Answer 1

Since all characters do not have the same baseline, you must play with each separately. The red borders in my example show this. This is the best I can do, I set the font-size to 30px to check the alignment.

 .icons { font-size: 30px; } .fa { border-top: 1px red solid; border-bottom: 1px red solid; } .download { position: relative; top: 0.07em; } .download:before { font-size: 1.06em; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <div class="icons"> <i class="fa fa-download fa-4x download"></i> <i class="fa fa-upload fa-4x upload"></i> <i class="fa fa-trash fa-4x trash"></i> </div> 

Use relative font sizes ( em unit) for the settings, and it will be the same as the font size.

Answer 2

The easiest way is to give them all alignment with a fixed width and center text:

 .fa { text-align: center; width: 16px; } 

Naturally, you will need to play around with the width to make it look the way you want, with the desired font size.

Modified JSFiddle Demo .

Before:

After:

Answer 3

You can try the following:

 ul li { list-style-type: none; display: inline-block; width: 30px; height: 30px; background-color: #fff; text-align: center; border-radius: 100%; margin: 0 11px; } i { padding-top: 20%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <ul> <li><i class="fa fa-download"></i> </li> <li><i class="fa fa-upload"></i> </li> <li><i class="fa fa-trash"></i> </li> </ul> 

Answer 4

You tried to use

 vertical-align: middle; 

for class for icons?