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

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

font-awesome css

mimic · 技术社区 · 6 年前

我想用这个正方形 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 回复 | 直到 6 年前

Tobias Geiselmann 6 年前

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>

推荐文章

Simon · 使用React更改字体可怕图标的颜色

2 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

6 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

6 年前

Pranta Saha · 为什么Font Awesome图标类不同

6 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

6 年前

LP13 · 在中心对齐定位标记内的内容

6 年前

Fjott · CSS-居中字体超级图标

6 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

6 年前

Tithos · 品牌FA5图标不工作

6 年前

SuperUberDuper · 字体awesome在加载之前显示方块

6 年前