0

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?

3
  • <a href="/twitter"><i class="fa fa-whateverIcon sm-button" style="--fa:f099;"></i></a>. Can you try this?
    – Sujil Maharjan
    Commented Aug 29, 2018 at 16:59
  • 10x Mahajan, It onlyshow b blank square meaning it dosent find the appropriate font to show. <i class="fab fa-twitter sm-button" style="--fa:f099;">. More over, it dosent solve the problem i raised - when ad blockers c a name of a social media site on the html, its being hide. so i want to bypasses this by using the unicode which only available for class in the css script and not inside html. so i need to give the class the code using param but it dosent work.... 10x
    – Udi Heller
    Commented Aug 29, 2018 at 17:43
  • Derek - 10x very much for the editing !
    – Udi Heller
    Commented Aug 29, 2018 at 17:43

2 Answers 2

Reset to default
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>

0
1

you can use data attribute of HTML5 to pass Cheatsheet/Unicode as parameter.

Please have a look below example, i hope you will find solution.

Feel free to write in case of any concern.

.social{
  list-style-type:none;
}

.social li{
  display:inline-block;
  margin:10px;
}

.social li a{
  display:inline-block;
  text-decoration:none;
  color:#333;
}

.social li a:before{
    content: attr(data-icon);   
    font-family: FontAwesome;
}

.social li a:hover{
  color:#ff0000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="social">
<li><a href="#/" data-icon="&#xf09a"></a></li>
<li><a href="#/" data-icon="&#xf099"></a></li>
<li><a href="#/" data-icon="&#xf0e1"></a></li>
<li><a href="#/" data-icon="&#xf0d2"></a></li>
</ul>

Not the answer you're looking for? Browse other questions tagged or ask your own question.