使用相同的unicode字体awsome

Question

我有以下css：

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

\f111是圆的unicode值。在字体中，我们有两个圆圈，一个是实心的，另一个是空的。我希望第一个是满的，第二个是空的，但两者的unicode都是一样的。

• https://fontawesome.com/icons/circle?style=solid
• https://fontawesome.com/icons/circle?style=regular

更新：

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

解决方案：

对我来说，唯一的解决方案是创建两个伪元素：一个是实心的前伪元素，另一个是正则的后伪元素。

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 */
}