Question

如何在带有“ far”和“ fas”等其他类的伪元素中使用FA 5.1？

我想像平常一样使用这个正方形https://fontawesome.com/icons/square?style=regular，但是只有“远”正方形才看起来是规则的。问题是我将它们用于“ after”之类的伪元素，却不知道如何告诉它也使用“ far”类。

我正在使用的CSS：

.square:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 12px;
    font-weight: 900;
    content: '\f0c8';
}

谢谢

Answer 1

这取决于您包括的Font Awesome CSS。如果包含regular.css，它将以常规形式显示形状。

.square:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 900;
    content: '\f0c8';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/regular.css" integrity="sha384-avJt9MoJH2rB4PKRsJRHZv7yiFZn8LrnXuzvmZoD3fh1aL6aM6s0BBcnCvBe6XSD" crossorigin="anonymous">

<div class="square"></div>

当您想同时获得实体和规则形状的优点时，这会很有趣。您可以包含FontAwesome中的all.css，并通过设置字体粗细来在实体形状和常规形状之间进行更改：font-weight: 900显示实体形状，font-wight: 400显示常规形状。

.square-solid:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 900;
    content: '\f0c8';
}


.square-regular:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 400;
    content: '\f0c8';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="square-solid"></div>

<div class="square-regular"></div>

FontAwesome 5与伪元素和其他类一起使用

1 个答案: