Font awesome 5 svg icon and text align vertically on the top

Question

I have an example on codepen, code source and like icon and text to be aligned vertically. Is there a nice way to do this without JS code? I like to keep line-height from li element and other styles.

Answer 1

Can't you put padding-top to the fa icon to align it with the text? Something like

.fa-amazon {
  padding-top: 5px;
}

Answer 2

Add vertical-align: middle to the svg element:

.svg-inline--fa.fa-li {
    vertical-align: middle;
}

Remove position: abosolute from the existing .fa-li css class as this is breaking the layout and preventing vertical-align: middle to work properly

.fa-li {
    /*left: -2em; */
    position: relative;
    text-align: center;
    width: 2em;
    line-height: 1.6;
}