“在...之前"伪元素在Font awesome v.5中不起作用 [英] The "before" pseudo element not working in Font awesome v.5

问题描述

我在做什么错了?

body {
  font-family: arial;
  font-size: 1.5rem;
}

li.facebook:before {
  content: "\f09a";
  font-family: FontAwesome;
}

li {
  list-style: none;
}

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
<ul>
  <li class="facebook">123 Drive.</li>
  <li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

推荐答案

更新2: TL; DR

UPDATE 2: TL;DR

font-family是错误的.

使用font-family: "Font Awesome 5 Brands"

对于字体很棒5 ，这必须成为以下之一:

For Font Awesome 5 this must be one of the following:

已更新，因为您使用的是CSS网络字体:

使用CSS的方法Web字体

For method Web Fonts with CSS

免费

font-family: "Font Awesome 5 Free"

专业版

font-family: "Font Awesome 5 Pro"

品牌 =>使用它！

font-family: "Font Awesome 5 Brands"

请参阅此处: https://jsfiddle.net/nwodoo32/1/

对于带有Javascript的SVG方法

For method SVG with Javascript

固体

font-family: "Font Awesome 5 Solid"

常规

font-family: "Font Awesome 5 Regular"

品牌

font-family: "Font Awesome 5 Brands"

灯光(专业版)

font-family: "Font Awesome 5 Light"

这篇关于“在...之前"伪元素在Font awesome v.5中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！