web-dev-qa-db-ja.com

Font awesome v.5で「before」疑似要素が機能しない

何が悪いのですか？

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>
cssfont-awesome-5
14
Labanino

更新2： TL; DR

font-family 間違っている。

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

Font Awesome 5 の場合、これは次のいずれかである必要があります。

css webfontsを使用しているため更新されました：

CSSを使用するメソッドWebフォントの場合

無料

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

ブランド=>これを使用してください！

font-family: "Font Awesome 5 Brands"

ここを参照してください： https://jsfiddle.net/nwodoo32/1/

JavaScriptを使用するメソッドSVGの場合

ソリッド

font-family: "Font Awesome 5 Solid"

レギュラー

font-family: "Font Awesome 5 Regular"

ブランド

font-family: "Font Awesome 5 Brands"

ライト（プロ）

font-family: "Font Awesome 5 Light"
28
mfgmicha

フォントファミリーを変更し、フォントの太さを定義する必要があります。

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-Twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}
10
MERT DOĞAN

：beforeまたは：after CSSセレクターでフォントを使用する場合も、Pseudo要素を有効にする必要があります。

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>
3
Wael Wafik