web-dev-qa-db-ja.com

Font Awesome 5疑似要素で正しいfont-familyを選択する

現在、CSS疑似要素でアイコンを使用することに混乱しています。 fontawesomeには4種類のフォントファミリーがあります：Font Awesome 5 Free、Font Awesome 5 Solid、Font Awesome 5 Brands、Font Awesome 5 Regular

HTMLは次のとおりです。

<h1>Hello</h1>

事例1

私はこのアイコンを使用します： https://fontawesome.com/icons/twitter?style=brands

ご覧のように、これはbrandsアイコンなので、font-family：Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* Twitter ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

できます！

事例2

私はこのアイコンを使用します： https://fontawesome.com/icons/phone?style=solid

ご覧のように、これはsolidアイコンなので、font-family：Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

動かない！

何が悪かったのですか？

正しいfont-familyをいつ使用するかはどのようにしてわかりますか？

cssfontsfont-awesomepseudo-elementfont-awesome-5
9
Marcel Angir

それらすべてを同じfont-familyで使用するだけで、ブラウザが機能します。最初のものでそれが見つからない場合は、2番目のものを使用します。 （ Font-Familyプロパティの複数のフォント？ ）

ちなみに、正しいfont-familyはFreeではなくSolidです。これは、Solidとの違いによるものです。 Regularはfont-weightであり、両方に同じfont-familyがあります。 ありませんfont-familyにはSolidとRegularがあり、FreeとBrands。

また、アイコンのほとんどすべてのSolidバージョンは無料ですが、すべてのregularバージョンが無料であるとは限りません。それらのいくつかは、PROパッケージに含まれています。アイコンが表示されない場合必ずしも必要ではありませんfont-familyの問題。

LightおよびduotoneバージョンはすべてPROバージョンです。

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}

.icon1:before {
  content: "\f099";
  /* Twitter ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

enter image description here

リファレンス： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

font-weightの問題に関連する質問： 疑似要素のFont Awesome 5はアイコンではなく正方形を示します

11
Temani Afif