html - Making a circle over span font icon -

i have quick question.

i'm making feedback survey smiley emoticons can see below. fonts i'm using doesn't have circle of face, i'm trying draw it.

my problem circle width never set smileys have different faces width:

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?

you need set span elements display: inline-block or display: block, otherwise default they'll set display: inline, mean width declaration ignored.

.rating-item span {     ...     display: inline-block; } 

---

demo

span {    background: #f00;    color: #fff;    height: 30px;    line-height: 30px;    text-align: center;    width: 30px;  }    ul.inline-block span {    display: block;  }    ul.no-inline-block span {    display: inline;  }    ul {    list-style-type: none;  }    li {    display: inline-block;  }

<h2>with block or inline block</h2>  <ul class="inline-block">    <li>      <span>1</span>    </li>    <li>      <span>2</span>    </li>    <li>      <span>3</span>    </li>  </ul>    <h2>without block or inline block</h2>  <ul class="no-inline-block">    <li>      <span>1</span>    </li>    <li>      <span>2</span>    </li>    <li>      <span>3</span>    </li>  </ul>