在跨度字体图标上绘制一个圆形

Question

我有一个问题。

我正在制作一个反馈调查，使用像下面看到的笑脸表情符号。 我使用的字体没有脸部的圆圈，所以我只是尝试画它。

我的问题是，圆圈的宽度从未设置，所以笑脸的宽度总是不同：

我的代码：

 .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>

有任何关于CSS/HTML的想法吗？

- Buendiadas

---

你可以通过SVG创建它。 - Sarower Jahan

你的标记有误，应该在关闭span标签后关闭center标签，此外center标签已被弃用。 - Pete

已删除中心部分，那只是我最后的快速尝试，问题没有改变。 - Buendiadas

尝试将 display:inline-block 添加到 .rating-item span。span 是内联元素，因此无法在其上设置宽度。 - Pete

Answer 1

您需要将您的span元素设置为display: inline-block或display: block，否则默认情况下它们将被设置为display: inline，这意味着您的width声明将被忽略。

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

演示

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>

- James Donnelly

Answer 2

试试这样做：演示。这与IT技术有关。

.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;
    height:30px;
    border-style: solid;
    border-radius: 50%;
    display:block;
    float:left;
    margin:10px;
}


li{

    list-style-type:none;
}

- G.L.P

Answer 3

你需要将 display:block 设为块级元素，并设置 宽度和高度：

.rating-item span {
    border-width: 2px;
    padding:5.5px;
    width:30px;
    height:30px;
    border-style: solid;
    border-radius: 50%;
    **display:block;**
    float:left;
    margin:10px;
}


li{

    list-style-type:none;
}

- Sistemas