html - 如何使用css制作一个小图标？

Question

我正在尝试创建一个小 donut chart 标 - 绿色。

这是我尝试过的:

        .success-icon {
          border: 1px #62ae41 solid;
          border-radius: 10px;
          width: 30px;
          height: 30px;
        }

<div class="col-lg-3"><span class="sucess-icon"> </span>greater than or equal to 75%</div>

我无法让它显示。我不确定发生了什么。

Answer 1

默认一个<span>是display: inline所以height和 width不适用于它。

设置display: inline-block或这些属性适用的其他一些值。

您还需要确保您的类名拼写一致，否则选择器将不匹配。

        .success-icon {
          border: 1px #62ae41 solid;
          border-radius: 10px;
          width: 30px;
          height: 30px;
          display: inline-block;
        }

<div class="col-lg-3"><span class="success-icon"> </span>greater than or equal to 75%</div>