【译文】将Font Awesome字体定义css伪类元素中的图标

2019-07-25 本文已影响3人铁甲万能狗

当您无法更改项目上的HTML时，我们可以利用CSS的功能向页面添加图标。
CSS具有称为伪元素的强大功能。 Font Awesome利用:: before伪元素从一开始就向页面添加图标。

这不适合Faint of Heart和前端开发以这种方式手动引用图标比将额外的i元素放入标记的标准方法更复杂且容易出错。所以暂停并考虑这是否真的值得。我们发现这是无法控制其网站/项目最终标记的人以及那些希望完全控制其标记的忍者的最佳选择。

运行原理

我们已经了解到Font Awesome使用fa和fa-user等类来显示站点中的图标。让我们复制这些类的功能并编写我们自己的类。

<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

如何使用CSS伪元素定义图标

为所有图标定义通用CSS。首先，有一些常见的CSS属性适用于所有图标。最好先在CSS中解决这个问题，这样你的图标定义就会很简单。

引用不同的图标

引用任何单个图标时，要包含四个重要部分：

设置伪元素以匹配在上一个常用设置步骤中使用的:: before或::after
将font-family设置为Font Awesome 5 Free或Font Awesome 5 Pro（取决于您使用的字体种类）
设置font-weight：900（Solid），400（常规），300（轻）
4.将内容设置为我们其中一个图标的unicode值。

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

/* Note: Make sure to include the correct weight and unicode value for the icon */
.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
}

将fa SVG 和fa JS框架配合CSS伪元素一起使用

启用伪元素

在使用SVG + JS Framework时，默认情况下禁用CSS Pseudo元素来渲染图标。您需要将<script data-search-pseudo-elements ...>属性添加到调用Font Awesome的<script />元素中。

将Pseudo Elements的显示设置为none

由于我们的JS会找到每个图标引用（使用你的伪元素样式）并自动在你的页面的DOM中插入一个图标，我们需要隐藏真实的CSS创建的伪元素。

<html>
  <head>
    <script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></script>

    <style>
      .icon::before {
        display: none;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }

      .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
      }

      .tps::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1ea";
      }
    </style>
  </head>
  <body>
    <ul style="margin: 0;">
      <li><span class="icon login"></span> Login</li>
      <li><span class="icon tps"></span> TPS Reports</li>
    </ul>
  </body>
</html>

支持动态变化
通过使用一些JavaScript和jQuery来切换元素的类，让它变得有趣。

<script>
  setInterval(function () {
    $('.ninety-four').toggleClass('arrow')
  }, 1000)
</script>

<style>
  .ninety-four::after {
    margin-left: 0.25em;
    font-size: 2em;
    vertical-align: middle;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c8";
  }

  .ninety-four.arrow::after {
    content: "\f152";
  }
</style>

<a class="ninety-four" href="https://en.wikipedia.org/wiki/Blink_element">Hey, do you remember the blink tag?</a>

原文参考：
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

干货资源：http://astronautweb.co/snippet/font-awesome/