How do I override the CSS content property of a pseudo ::before/::after element?

Question

This question is not a duplicate, though it might appear so to someone not reading very carefully.

This is not a question about CSS specificity, nor is it about the !important directive (I don't think).

What I am trying to learn is this: When using a (unicode?) FontAwesome code as my 'content' property value in a ::before pseudo element, how can I set a base custom bullet for a list of items, and change each bullet icon by only changing the 'content' value?

Answer 1

Here is how I solved this:

/* FA ICONS */
:root {
   --lt-gray: #99a7a7;
   --lav: #5990bf;
   --client: brown;

   --fa-phone: '\f098';
   --fa-email: '\f0e0';
   --fa-linkedin: '\f08c';
   --fa-portfolio: '\f0b1';
   --fa-github: '\f09b';
}

/* UL */
.ehw-contact {
  background: orange;
  list-style: none;
  width: 50vw;
  padding: 1rem;
}

.ehw-contact li {
  background: aliceblue;
  margin: .3rem
}

/* Color, Padding, other Basic Config for bullets */
.ehw-contact li:before {
  font-family: "FontAwesome";
  content: "\f082";
  margin: 1rem;
  color: purple;
/*   font-size: 1.3rem; */
}

/* List Items */
.ehw-contact .phone:before { content: '\f098'}
.ehw-contact .email:before {content: '\f0e0'}
.ehw-contact .linkedin:before {content: '\f08c'}
.ehw-contact .portfolio:before {content: '\f0b1'}
.ehw-contact .github:before {content: '\f09b'}

<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<ul class="ehw-contact">
  <li class=" phone">Phone: 999-999-9999</li>
  <li class=" email">Email: [email protected]</li>
  <li class=" linkedin">LinkedIn: https:linkedin.com/in/erichepperle</li>
  <li class=" portfolio">Portfolio: erichepperle.com/</li>
  <li class=" github">GitHub: @codewizard13</li>
</ul>

(Codepen here)

And here is the result:

Explanation:

Intermediate Attempts:

• Originally I had set root CSS icon value variables, but I couldn't get them to work for the override
• I had tried to use :: and single :

Working Solution Explanation:

1. First we define some CSS font awesome icon variables, but we don't use them. I could have just made this a multi-line comment, but I feel defining (unused) root variable makes my intentions clearer in this case.

2. Next define and style the ul which acts as a container element

3. Style the li elements

4. Define a base style for Font Awesome icon bullets with a 1rem margin and an icon color of purple and set the square Facebook logo as the 'content' value using :before pseudo element. NOTE: It turns out single colon (:) works perfectly (instead of ::), though I'm not entirely sure why

5. For each list item I set the bullet style by selection each li applied class (email, portfolio, etc.) changing the content property value only.