Question

我有以下CSS：

p.word::after{
  content:  " \f111 \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
}

\ f111是圆的unicode值。在真棒字体中，我们有两个圆圈，一个圆圈，另一个圆圈。我希望第一个填充为空，第二个填充为空，但是两者的unicode相同。

更新：

我的问题是如何在同一内容伪元素中使用两个不同的图标。这不可能。

解决方案：

对我来说，唯一的解决方案是创建两个伪元素：一个带有实体的伪元素之前和一个带有规则的伪元素之后。

p.word::before{
  content:  " \f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
  letter-spacing: 4px;
  float: right;
}

p.word::after{
  content:  " \f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  letter-spacing: 4px;
  float: right;
}

Answer 1

对于实心圆

p.word::after{
  content:  " \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
  font-weight:900;     /* Add this */
}

对于常规圈子

p.word::after{
  content:  " \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
  font-weight:200;    /* Add this */
}

具有相同unicode的字体真棒

1 个答案: