FontAwesome unicodes 似乎不起作用? [英] FontAwesome unicodes don't seem to work?

问题描述

我有一个 <li> 悬停时应该将数字更改为 unicode 图标，例如播放按钮.

I have an <li> that when hovered is supposed to change a number into a unicode icon, for example a play button.

unicodes 不断弹出一个看起来像这样的图标:[?] 我假设它找不到它们.我在其他部分使用字体图标就好了，有什么想法吗?

The unicodes keep popping up an icon that looks like this: [?] I'm assuming it can't find them. I am using font icons in other parts just fine, any ideas?

    <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.

I have tried writing the unicode in every possible way I could think of.

content: "/XXXX";

内容:"\XXXX";

内容:XXXX";

content: "[XXXX]";

它们似乎都不适合我.

推荐答案

将字体系列添加到您的 CSS，例如:

Add the font-family to your CSS, like:

.popular-songs li:hover .number:after{
  font-family: 'FontAwesome';
  content: "\f04b";
  position:relative;
  top:15px;
}

仅供参考，这里是所有图标的 FontAwesomes CSS:

And just for reference, here's FontAwesomes CSS for all icons:

.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);
}

这篇关于FontAwesome unicodes 似乎不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！