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>

仅作记录，当您调用类时，以下操作确实有效

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

有什么建议吗？

Answer 1

您可以使用HTML5的data属性将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

您几乎不错，只需保持相同的语法即可。请不要忘记\和'。对于Twitter图标和其他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文件

2 个答案: