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

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

  •  0
  • Murphy1976  · 技术社区  · 6 年前

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

    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 回复  |  直到 5 年前
        1
  •  13
  •   Temani Afif    4 年前

    如果您正在使用 读这个: 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创建的伪元素。

        2
  •  1
  •   Eli Peters    6 年前

    如文件所述 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>
    推荐文章