Star rating with css - how to align text value with icons, so that they are the same height and size

Question

I need to create a star rating and I want it to look exactly as on the image (). I used google icon for stars and and for numeric value. However, I don't know how to align this value with icons so that the would be on the same line. For now "(50%)" are slightly below the baseline of star icons. I tried to display numeric value as a block and give to it margins and paddings, but this didn't help.

Here's my HTML by now:

            <i class="material-icons">star</i>

                <i class="material-icons">star</i>

                <i class="material-icons">star</i>

                <i class="material-icons">star</i>

                <i class="material-icons">star_border</i>

                <span id="rating">(50%)</span>

Any help or trick-suggestions would be appreciated!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

For some reason the icons are automatically aligned to the top. So if you use vertical-align: bottom; they will then have the same baseline as the text.

.star-wrapper i {
 vertical-align: bottom;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="star-wrapper">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>
</div>

Star rating with css - how to align text value with icons, so that they are the same height and size

Sign up