Font awsome with same unicode

Question

I have the following css:

p.word::after{
  content:  " \f111 \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
}

\f111 is the unicode value for a circle. In the font awesome we have two circles, one filled and other empty. I would like the first filled and the second one empty, but the unicode is the same for both of them.

UPDATE:

My question is how to use two different icons in the same content pseudolement. It is not possible.

SOLUTION:

The only solution for me is to create two pseudoelements: a before pseudoelement with solid and a after pseudolement with regular.

p.word::before{
  content:  " \f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
  letter-spacing: 4px;
  float: right;
}

p.word::after{
  content:  " \f111";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  letter-spacing: 4px;
  float: right;
}

the difference is the font-weight – Temani Afif Nov 09 '19 at 19:43 — Temani Afif, Nov 09 '19 at 19:43
I know, but I can´t find the solution for the content. – Francesc VE Nov 09 '19 at 20:07 — Francesc VE, Nov 09 '19 at 20:07
use both pseudo element, you cannot with the same – Temani Afif Nov 09 '19 at 20:09 — Temani Afif, Nov 09 '19 at 20:09

Par Tha · Answer 1 · 2019-11-09T20:24:01.733

1

For Solid Circle

p.word::after{
  content:  " \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
  font-weight:900;     /* Add this */
}

For Regular Circle

p.word::after{
  content:  " \f111";
  font-family: "fontawesome";
  letter-spacing: 4px;
  float: right;
  font-weight:200;    /* Add this */
}

edited Nov 09 '19 at 20:24

answered Nov 09 '19 at 16:12

Par Tha

1,265
7
10

It is not possible to set the class in the content. – Francesc VE Nov 09 '19 at 20:07
try my updated code. font-weight is the matter for both – Par Tha Nov 09 '19 at 20:24

Font awsome with same unicode

1 Answers1