在attr（）前面的伪元素中使用FontAwesome图标 [英] Use FontAwesome icon inside a ::before pseudo element with attr()

问题描述

我试图用 attr（）在 :: before 伪元素内插入一个FontAwesome图标。原始代码比较复杂，但是这会让你知道我想要什么：

 < div data-background-图标= \f086 >< / DIV> 
 
 div :: before {
 content：attr（data-background-icon）; 
 font-family：FontAwesome; 
} 
  

https://jsfiddle.net/grutcop8/

它不起作用，而嵌入它的通常方法工作正常：

  div :: before {
 content：\f086; 
 font-family：FontAwesome; 
} 
  

我缺少什么？

解决方案

用Unicode试试

CSS转义序列只能在CSS字符串中使用。当您从HTML属性（即CSS外部）获取CSS转义序列时，它将被逐字读取，而不会被解释为CSS字符串的一部分。

如果要在HTML属性中编码字符，则需要
将其作为HTML实体进行编码。

您应该在您的font-Awesome图标代码之前添加&＃x>。即如果你想使用 / f086 ，那么写&＃xf086 而不是

从这里获取unicode - https：//fortawesome.github。 io / Font-Awesome / cheatsheet /

$ b

div：before {content：attr（data-background-icon）; font-family：FontAwesome;}

< link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css =stylesheet/>< div data-background-icon ='& amp; amp; ;＃xf086;'>< / div>

I am trying to insert a FontAwesome icon inside a ::before pseudo element with attr() . The original code is more complex, however this will give you an idea of what I want:

<div data-background-icon="\f086"></div>

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

https://jsfiddle.net/grutcop8/

It doesn't work, while the usual way to embed it works OK:

div::before {
  content: "\f086";
  font-family: "FontAwesome";
}

Anything I am missing?

解决方案

Try with Unicode

CSS escape sequences only work within CSS strings. When you take a CSS escape sequence from an HTML attribute (i.e. outside of CSS), it will be read literally, not interpreted as part of a CSS string.

If you want to encode the character within an HTML attribute, you need to encode it as an HTML entity.

you should add "&#x" before your font-Awesome icon code. ie, if you want to use /f086, then write &#xf086 instead

get the unicode from here - https://fortawesome.github.io/Font-Awesome/cheatsheet/

div:before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div data-background-icon='&#xf086;'></div>

这篇关于在attr（）前面的伪元素中使用FontAwesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！