<li>标签上的FontAwesome 5替换显示空方块

时间:2018-02-12 19:04:22

标签: css font-awesome font-awesome-5

尝试使用Font Awesome图标替换列表项标记上的项目符号类型,但我得到一个空方块:

HTML

    <ul>
        <li class="testitems">List Item 1</li>
        <li class="testitems">List Item 2</li>
        <li class="testitems">List Item 3</li>
        <li class="testitems">List Item 4</li>
        <li class="testitems">List Item 5</li>
    </ul>

CSS

ul {
    list-style: none;
}    
.testitems {
    line-height: 2em;
}
.testitems:before {
    font-family: "FontAwesome";
    content: "\f058";
    margin: 0 5px 0 -15px;
    color: #004d00;
    display: inline-block;
}

我知道字体库正在加载,因为我能够使用<i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>并正确呈现字体(虽然没有正确设置样式)。

3 个答案:

答案 0 :(得分:6)

使用Font Awesome 5的最后一个版本,您可以通过添加data-search-pseudo-elements来启用使用JS版本的伪元素,如下所示:

&#13;
&#13;
ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}
&#13;
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
&#13;
&#13;

您可以查看文档以获取更多详细信息:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js

enter image description here


旧答案

正如您在此问题中看到的那样Using Font Awesome icon for bullet points, with a single list item element您可以使用内容和伪元素轻松设置图标,但需要注意,因为Font Awesome 5正在使用SVG,如果使用SVG这个技巧就不会起作用你使用推荐的JS版本:

&#13;
&#13;
ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "FontAwesome";
  content: "\f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}
&#13;
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
&#13;
&#13;

因此,为了获得您想要的内容,您需要加载包含字体和使用图标的旧方法的CSS版本,并调整字体名称,如下所示:

&#13;
&#13;
ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome\ 5 Free";
  content: "\f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}
&#13;
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

Font Awesome的文档中所述,如何启用Pseudo class ...

&#13;
&#13;
ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f058";
  display: none;
}
.user::before{
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
  display: none;
}
&#13;
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

如果你使用包管理器在你的项目中安装 fontawesome(我在 Rails 项目中使用 yarn),你不仅要导入 js 资源,还要导入 css 资源:

.button span:after {
  content: '\00bb';