Font Awesome 5 Choosing the correct font-family in pseudo-elements

by

Simply use all of them in the same font-family and the browser will do the job. If it doesn’t find it in the first one, it will use the second one. (Multiple fonts in Font-Family property?)

By the way, the correct font-family is Free not Solid because the difference between Solid and Regular is the font-weight and both have the same font-family. There is no Solid and Regular in font-family, only Free and Brands.

You may also notice that almost all the Solid version of the icons are free BUT not all the regular version are free. Some of them are included in the PRO package. If an icon is not showing it’s not necessarely a font-family issue.

All the Light and duotone version are PRO ones.

.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

Reference: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Related question dealing with the font-weight issue: Font Awesome 5 on pseudo elements shows square instead of icon

More Related Contents:

  1. Font Awesome 5, why is CSS content not showing?
  2. Font Awesome 5 on pseudo elements shows square instead of icon
  3. Font Awesome 5 shows empty square when using the JS+SVG version
  4. Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?
  5. Font Awesome 5 unicode
  6. How to change color of icons in Font Awesome 5?
  7. Why do the :before and :after pseudo-elements require a ‘content’ property?
  8. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  9. What is the difference between a pseudo-class and a pseudo-element in CSS?
  10. Browsers’ default CSS stylesheets
  11. CSS Font Border?
  12. Can I change the height of an image in CSS :before/:after pseudo-elements?
  13. Why should we include ttf, eot, woff, svg,… in a font-face
  14. Should I use single or double colon notation for pseudo-elements?
  15. How to use Font Awesome from webjars.org with JSF
  16. How to import fonts in CSS?
  17. How is font size calculated?
  18. Converting and rendering web fonts to base64 – keep original look
  19. ::before pseudo-element stacking order issue
  20. Multiple font-weights, one @font-face query
  21. Fonts looks different in Firefox and Chrome
  22. CSS3 ::selection behaves differently in FF & Chrome
  23. How do I include a font awesome icon in my svg?
  24. css rotate a pseudo :after or :before content:”” [duplicate]
  25. Forcing anti-aliasing using css: Is this a myth?
  26. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  27. Purpose of *:before, *:after rule without content property
  28. Custom li list-style with font-awesome icon
  29. css different font sizes on different families
  30. Combine CSS Attribute and Pseudo-Element Selectors?

Leave a Comment