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

【问题标题】：Dynamic FontAwesome - Passing unicode as parameter to CSS fileDynamic FontAwesome - 将 unicode 作为参数传递给 CSS 文件
【发布时间】：2018-08-29 16:30:51
【问题描述】：

由于广告拦截器阻止社交媒体链接，我试图将 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";
}

有什么建议吗？

【问题讨论】：

。你可以试试这个吗？
10x Mahajan，它只显示 b 空白方块，这意味着它没有找到合适的字体来显示。
Derek - 10x 非常适合编辑！

标签： html css font-awesome font-awesome-5 css-variables

【解决方案1】：

你几乎很好，只需保持相同的语法。不要忘记\ 和'。对于推特图标和其他社交，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>

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：