Dynamic FontAwesome - 将 unicode 作为参数传递给 CSS 文件

Question

由于广告拦截器会阻止社交媒体链接，我正在尝试将 unicode 作为参数传递给 css 文件（您不能在 HTML 代码中提供它，只能在 css脚本格式）

但是不行。

样式表：

.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>

仅作记录，当您调用 class

时，以下内容确实有效

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

有什么建议吗？

Answer 1

您可以使用 HTML5 的数据属性将 Cheatsheet/Unicode 作为参数传递。

请看下面的例子，希望你能找到解决办法。

如有任何疑问，请随时写信。

.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>

Answer 2

你差不多好了，保持相同的语法即可。不要忘记 \ 和 '。对于推特图标和其他 socila，font-family 是 Brands 而不是 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>

Dynamic FontAwesome - 将 unicode 作为参数传递给 CSS 文件

Dynamic FontAwesome - Passing unicode as parameter to CSS file

html

css

font-awesome

css-variables

font-awesome-5