How to Properly Set the Font-Family for Font Awesome 5 Icons in CSS Pseudo-elements?

Selecting the Correct Font-Family for Font Awesome 5 Pseudo-Elements

In using Font Awesome icons within CSS pseudo-elements, it is crucial to choose the correct font-family to ensure the icons display properly. As you have encountered, using an incorrect font-family can lead to the icon not appearing.

Multiple Fonts in the Font-Family Property

The solution lies in utilizing multiple fonts in the font-family property. By doing so, the browser will search for the icon in each specified font-family until it finds a match. In this case, you could use:

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

Font-Family for Solid and Regular Icons

Contrary to what you have assumed, the font-family for both solid and regular icons is "Font Awesome 5 Free," not "Font Awesome 5 Solid." The difference between solid and regular icons lies in their font weight, not their font-family.

Free vs. PRO Icons

You have also noticed that not all regular icons are free. Some are included in the PRO package of Font Awesome. Therefore, if an icon is not displaying, double-check its availability under the Free plan.

Example Code

To illustrate the correct usage, consider the following example:

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.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>

The above is the detailed content of How to Properly Set the Font-Family for Font Awesome 5 Icons in CSS Pseudo-elements?. For more information, please follow other related articles on the PHP Chinese website!