Dynamic FontAwesome - Passing unicode as parameter to CSS file

Question

since ad blockers block social media links, i am trying to pass the unicode to the css file as parameter (you cant give it in the HTML code, only in css script format)

But it does not work.

stylesheet:

.sm-button {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: var(--fa);
}

html

<li>
    <a href="/twitter"><i class="sm-button" style="--fa:f099;"></i></a>
</li>

Just for the record, the following does work when u call the class

#back-to-top:after {
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    content: "\f106";
}

Any suggestions?

Answer 1

You are almost good, Simply keep the same syntax. Don't forget the \ and the '.For the twitter icon and the other socila the font-family is Brands not Free.

.sm-button::before {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 900;
  content: var(--fa);
  
  font-style:normal;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" >
<a href="/twitter"><i class="sm-button" style="--fa:'\f099';"></i></a>