Yegor Gunko Yegor Gunko - 1 year ago 162
CSS Question

Icons are not on the same line

I'm new to CSS and HTML and I got stuck at the easy problem...
I use fontawesome and the icons are not inline(fa fa-volume-down and fa fa-music)
Anyway to fix it?Thank you for spending your time for me!

Here is live example on JSFiddle(you can see that the volume icon is higher than the music note icon)

Here is my code :


<nav class="player">
<div class="container">
<div class="d-flex justify-content-between">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down volume_icon"></i>
<span><i class="fa fa-music radio_icon accent_color"></i>&nbsp;Anison</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>


.player{padding:.75rem 1rem;margin-bottom:1rem}
.player_play{font-size:36px}
.radio_icon{padding-right:5px;}
.radio_select{font-size:20px}
.volume_icon{font-size:20px;margin-right:10px}

Answer Source

You can align it correctly using vertical-align.

.volume_icon {
    font-size: 20px;
    margin-right: 10px;
    vertical-align: bottom;
}

result enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download