FontAwesome unicode 似乎不起作用?
FontAwesome unicodes don't seem to work?
我有一个 <li>
悬停时应该将数字更改为 unicode 图标,例如播放按钮。
unicode 不断弹出一个如下所示的图标:[?]
我假设它找不到它们。我在其他部分使用字体图标很好,有什么想法吗?
<ul class="popular-songs">
<li>
<div class="album-cover"><img src="http://newnoisemagazine.com/wp-content/uploads/2014/04/Expire-Pretty-Low-cover.jpg"></div>
<span class="number">
<span>1</span>
</span>
<span>+</span>
<span class="title">Pretty Low</span>
<span class="misc"><i class="fa fa-ellipsis-h"></i></span>
<span class="total-plays">163,957</span></li>
</ul>
CSS:
.popular-songs li .number{
position: relative;
content: '1';
top:0px;
}
.popular-songs li:hover .number span{
display: none;
}
.popular-songs li:hover .number:after{
content: "\f04b";
position:relative;
top:15px;
}
我已经尝试用我能想到的所有可能的方式编写 unicode。
content: "/XXXX";
content: "\XXXX";
content: "XXXX";
content: "[XXXX]";
None 似乎对我有用。
将字体系列添加到您的 CSS,例如:
.popular-songs li:hover .number:after{
font-family: 'FontAwesome';
content: "\f04b";
position:relative;
top:15px;
}
仅供参考,这里是所有图标的 FontAwesomes CSS:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
我有一个 <li>
悬停时应该将数字更改为 unicode 图标,例如播放按钮。
unicode 不断弹出一个如下所示的图标:[?]
我假设它找不到它们。我在其他部分使用字体图标很好,有什么想法吗?
<ul class="popular-songs">
<li>
<div class="album-cover"><img src="http://newnoisemagazine.com/wp-content/uploads/2014/04/Expire-Pretty-Low-cover.jpg"></div>
<span class="number">
<span>1</span>
</span>
<span>+</span>
<span class="title">Pretty Low</span>
<span class="misc"><i class="fa fa-ellipsis-h"></i></span>
<span class="total-plays">163,957</span></li>
</ul>
CSS:
.popular-songs li .number{
position: relative;
content: '1';
top:0px;
}
.popular-songs li:hover .number span{
display: none;
}
.popular-songs li:hover .number:after{
content: "\f04b";
position:relative;
top:15px;
}
我已经尝试用我能想到的所有可能的方式编写 unicode。
content: "/XXXX";
content: "\XXXX";
content: "XXXX";
content: "[XXXX]";
None 似乎对我有用。
将字体系列添加到您的 CSS,例如:
.popular-songs li:hover .number:after{
font-family: 'FontAwesome';
content: "\f04b";
position:relative;
top:15px;
}
仅供参考,这里是所有图标的 FontAwesomes CSS:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}