代码之家 › 专栏 › 技术社区 › Murphy1976

Font Awesome 5-SVG/JS伪类问题[复制]

font-awesome-5 font-awesome svg css html

Murphy1976 · 技术社区 · 7 年前

尝试用字体很棒的图标替换列表项标记上的项目符号类型,但我得到的是一个空方块:

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

<script src="https://use.fontawesome.com/releases/v5.12.0/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="fas fa-check-circle"></i><li class="testitems">List Item 1</li> 字体呈现正确(虽然样式不正确)。

0 回复 | 直到 6 年前

Temani Afif 6 年前

^{如果您正在使用

读这个:

Font Awesome 5, why css content is not showing?}

使用字体awesome5的最新版本,您可以通过添加 data-search-pseudo-elements 如下所示:

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

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/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>

你可以检查 documentation

如果您使用我们的SVG+JS框架来呈现图标,您需要做一些额外的事情:

启用伪元素

<script data-search-pseudo-elements ... > 属性 <script /> 元素调用字体Awesome。

因为我们的JS将找到每个图标引用(使用伪元素样式),并自动将一个图标插入页面DOM中,所以需要隐藏呈现的真正CSS创建的伪元素。

Eli Peters 8 年前

如文件所述 Font Awesome

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

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