问动态FontAwesome -将unicode作为参数传递给CSS文件
EN

Stack Overflow用户

提问于 2018-08-30 00:30:52

回答 2查看 888关注 0票数 0

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

有什么建议吗？

css-variables

html

css

font-awesome

font-awesome-5

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-30 02:33:27

你几乎是好的，只是保持相同的语法。别忘了\和'的.For，twitter的图标，还有另一个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>

票数 1

Stack Overflow用户

发布于 2018-08-30 02:14:39

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52082193

复制

相似问题

问动态FontAwesome -将unicode作为参数传递给CSS文件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态FontAwesome -将unicode作为参数传递给CSS文件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态FontAwesome -将unicode作为参数传递给CSS文件
EN