I have a quick question.

I'm making a feedback survey with smiley emoticons like you can see below. 
The fonts I'm using doesn't have a the circle of the face, so I'm just trying to draw it. 

My problem is that the circle width is never set so the smileys always have different faces width:

![enter image description here](https://i.stack.imgur.com/KHeaO.png)

My code:

```
 .rating-item{

    border-width:3px;
    border-color:black;
    font-size:150%;
    font-style:bold;

}

.rating-item span{

    border-width: 2px;
    padding:5.5px;
    width:30px;
    border-style: solid;
    border-radius: 50%;
}

    <div class="article-survey-container ">
<div class="article-survey ">

    <div class="selected-text"></div>
    <div class="recorded-message"></div>
    <ul class="ratings">
        <li data-rating="5" class="rating-item" id="muy-dificil-rating"> <span class="fontelico-emo-unhappy "> </span></li>
        <li data-rating="4" class="rating-item" id="dificil-rating">   <span class="fontelico-emo-displeased"> </span></li>
        <li data-rating="3"  class="rating-item"id="normal-rating">   <span class="fontelico-emo-sleep"> </span></li>
        <li data-rating="2"  class="rating-item"id="facil-rating">  <span class="fontelico-emo-happy"> </span></li>
        <li data-rating="1" class="rating-item" id="muy-facil-rating">  <span class="fontelico-emo-grin"> </span></span></li>

    </ul>

    <br>

    <input type="hidden" name="dificultad" id="dificultad" value="">
</div>
</div>
</div>

```

Any Css/Hml Idea?