Font Awesome 5 not working when adding icon through ::before

Question

I am trying to include font awesome icon through CSS pseudo elements, but it never appears. I already tried to set the font family to "Font Awesome 5 Free", "Font Awesome 5 Brand" and adjust font weights to different values but none of them work for me. What did I miss?

My CSS

.form-field::before{
    font-family: "Font Awesome 5 Brands";
    content: "\f057";
    position: absolute;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

.form-field::after{
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    position: absolute;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

CDN

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

Check Rendered Fonts in your styles Computed tab (browser code inspector), be sure that proper font is rendered — Vladislav Akhmetvaliyev, Jul 16 '21 at 14:52
Also, keep in mind that the input element does not support pseudoelements (::before, ::after). Add wrapper and assign your styles to wrapper — Vladislav Akhmetvaliyev, Jul 16 '21 at 14:54
Thank you Vlad, I did use pseduoelements on a input and my problem is gone after the fix. :) — Dave Yu, Jul 16 '21 at 14:56
@MaxwellYu well, I've added a working example anyway, you can upvote it if it was helpfull :) — Vladislav Akhmetvaliyev, Jul 16 '21 at 15:02

score 1 · Accepted Answer · answered Jul 16 '21 at 14:59

Here is the working example

.wrapper {
  width: 200px;
  position: relative;
}
.wrapper::before{
    font-family: "Font Awesome 5 Brands";
    content: "\f057";
    position: absolute;
    left: 0;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

.wrapper::after{
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    position: absolute;
    top: 5px;
    right: 0;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

input {
  height: 50px;
  width: 100%;
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<div class="wrapper">
  <input class="form-field" type="text">
</div>

Font Awesome 5 not working when adding icon through ::before

1 Answers1