问题描述
我试图用 attr()
在 :: before
伪元素内插入一个FontAwesome图标。原始代码比较复杂,但是这会让你知道我想要什么:
< div data-background-图标= \f086 >< / DIV>
div :: before {
content:attr(data-background-icon);
font-family:FontAwesome;
}
它不起作用,而嵌入它的通常方法工作正常:
div :: before {
content:\f086;
font-family:FontAwesome;
}
我缺少什么?
用Unicode试试
CSS转义序列只能在CSS字符串中使用。当您从HTML属性(即CSS外部)获取CSS转义序列时,它将被逐字读取,而不会被解释为CSS字符串的一部分。
您应该在您的font-Awesome图标代码之前添加&#x
>。即如果你想使用 / f086
,那么写&#xf086
而不是
从这里获取unicode -
$ 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.
you should add "&#x"
before your font-Awesome icon code. ie, if you want to use /f086
, then write 
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=''></div>
这篇关于在attr()前面的伪元素中使用FontAwesome图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!