Question

我有一个 css 代码 here as plunktr。我可以使用十六进制代码绘制图标，但我无法使用 css 为刻度图标绘制完美的圆圈。

这是我用过的：

.tick-icon::after {
  content: '\2713';
  border-radius: 50%;
  background-color: red;
  font-size: 2rem;
  color: #ffffff;
}

我看到的更像是椭圆形。如何使它成为一个完美的圆圈？

Answer 1

要得到一个圆，伪元素的高度和宽度必须设置为相同的尺寸。如果这不是专门做的，那么系统只会根据字符的尺寸来确定大小，而不是方形。

此代码段使用 CSS 变量来设置字体大小（如您在代码中所用），然后进行计算以设置周围伪元素的尺寸 - 显然将乘数更改为您想要的值。

.tick-icon {
  position: relative;
}
.tick-icon::after {
  --size: 10rem;
  content: '\2713';
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  border-radius: 50%;
  background-color: red;
  font-size: var(--size);
  --dimension: calc(1.5 * var(--size));
  width: var(--dimension);
  height: var(--dimension);
  color: #ffffff;
}

<div class="tick-icon"></div>

Answer 2

设置宽度/高度：

.tick-icon::after {
  content: '\2713';
  border-radius: 50%;
  background-color: red;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  display: inline-block;
  color: #ffffff;
}

在“tick”图标的 HTML 十六进制代码周围添加一个适当的圆圈

2 个答案: