Question

我试图将心脏U + 1F0B1白色的unicode ace保持为绿色的身体背景。我认为我需要创建一个与卡片大小相同的div并将其设置为白色。有更好的方法吗？

Answer 1

您也可以使用伪类在单个HTML元素中执行此操作。与图标集的工作方式类似。

＆＃13;

i {
  background: green;
  font-style: normal;
  padding: 2px 4px;
}

i::before {
  content: "\1F0B1";
  color: white;
}

＆＃13;

<i class="heart"></i>

＆＃13;

Answer 2

这是样本方式。但您需要根据unicode的字体大小调整“text-indent”和“letter-spacing”。见下面的代码

body {
background: grey;
}
i {
    position: relative;
    display: inline-block;
}
i::before{
   content: "\1F0B1";
    font-style: normal;
    color: white;
    display: block;
    line-height: 0.8;
    font-size: 150px;
    background: green;
    letter-spacing: -10px;
    text-indent: -10px;

}

<i class="heart"></i>

如何更改unicode符号的背景颜色？

2 个答案: