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.
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;
}
Can't you put padding-top to the fa icon to align it with the text? Something like
.fa-amazon { padding-top: 5px; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.