时间戳

首页 > 解决方案 > FontAwesome 5 使用伪元素和附加类

css - FontAwesome 5 使用伪元素和附加类

问题描述

如何在带有“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';
}

谢谢

标签： cssfont-awesome

解决方案

这取决于您包含的 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>

推荐阅读