通过伪元素和图标字体实现连字图标

以下是 Jason Jacobson 的客座文章，他是明尼阿波利斯创业公司 LeadPages® 的高级工程师。Jason 展示了一些我之前不知道的功能：将字符串转换为图标。这需要使用图标字体，我 通常推荐使用 SVG 来创建图标，但这并不妨碍它成为一个值得了解的真正的 CSS 技巧！

伪元素（例如 ::before 和 ::after）在创建网站时对我帮助很大，因此我想出了一个方法，可以将它们与连字图标结合使用，从而创建更易读和易于维护的代码。

连字图标？是的！这就是 Google 的 Material Icons 的工作原理。

但是，您无需在 HTML 中使用文本，而是可以使用伪元素。也就是说，使用 CSS 中的 content 属性将字符串注入到任何元素中。假设您有以下 HTML 代码

<button data-icon="delete">Remove this item</button>

我们可以将字符串附加到该元素上（“delete”），如下所示

[data-icon]::before {
  content: attr(data-icon);
}

然后，我们可以通过神奇的连字的力量，将该文本转换为图标。当字体家族设置为支持连字图标的字体（例如 Material Icons）时，此操作会自动执行。

首先，您需要使该图标字体可用

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

伪元素图标的完整 CSS 代码如下所示

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  * Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
   
  * Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

注意：我们需要使用 font-feature-settings 属性才能使此功能在 Internet Explorer 中正常工作。

如何显示一个列表，其中包含一个选中的项目？

<ul class="list">
  <li>One</li>
  <li data-icon="check">Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

查看 CSS-Tricks 的 Pen Pen #01（@css-tricks）在 CodePen 上。

您还可以将其用于显示与集成或表单相关的用户状态。

<ul class="list">
  <li data-icon="error">Int One</li>
  <li data-icon="check">Int Two</li>
  <li data-icon="error">Int Three</li>
  <li data-icon="error">Int Four</li>
</ul>

查看 CSS-Tricks 的 Pen 连字图标 – 错误指示器（@css-tricks）在 CodePen 上。

请注意，对于到目前为止的所有示例，我都没有添加任何额外的 CSS 或 HTML 代码来获取新的图标。

这是一个按钮的示例，它具有 :hover 和 :active 状态。我添加了另一个属性来处理成功图标。这可以通过 JavaScript 来完成，但由于这是 CSS-Tricks，所以我选择了纯 CSS 方法。

查看 CSS-Tricks 的 Pen Pen #03（@css-tricks）在 CodePen 上。