代码之家 › 专栏 › 技术社区 › mimic

Font5与伪元素和附加类[duplicate]一起使用

font-awesome css

mimic · 技术社区 · 7 年前

我想用这个正方形 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';
}

谢谢

1 回复 | 直到 7 年前

Tobias Geiselmann 7 年前

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>

这很有趣,当你想要两个世界中最好的,固体和规则的形状。你可以包括全部.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>