Question

我正在尝试创建一个小甜甜圈保持图标 - 绿色。

以下是我的尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

默认情况下，<span>为display: inline，因此height和width不适用于此。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在样式中使用display：inline-block

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

Answer 3

这里有一些额外的款式可以与你想要的东西相匹配。

.success-icon {
    border: 8px #62ae41 solid;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    margin: 0 5px 0 0;
    display: inline-block;
    vertical-align: middle;
}
.col-lg-3{
      vertical-align: middle;
}

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

如何使用CSS制作一个小图标？

3 个答案: