Stackicons：用字体图标做更多的事情

以下是 Parker Bennett 的客座文章。虽然字体图标高效易用且可扩展等等，但其经典的“缺点”之一就是图标只能使用一种颜色。Parker 有一个全新的项目，以一种简单巧妙的方式解决了这个问题。我让他来为您介绍一下。

即使 图标的未来 很可能属于 SVG，但在当下，字体图标仍然提供了一种引人注目的替代方案——只需使用 CSS 即可轻松地设置颜色、大小、文本阴影、悬停效果等样式。字体图标 仍然很棒。

SVG 相比字体图标的一大优势在于全彩色。但字体图标不必局限于单色。通过叠加两个或多个元素，我们可以使用现代扁平化风格创建独特的“多色”图标。如果您曾经做过任何双色或丝网印刷，那这和它的原理类似。

我称之为 Stackicons。

对于每种颜色，我们使用一个单独的伪元素，然后使用绝对定位将它们彼此叠加。（如果想要超过两种颜色，则需要使用非语义化的 span 元素。）

/* @font-face to load icon font... */

/* horizontal button row: inline-block vs float makes positioning easier using text-align */

/* any class that starts with "st-icon-" */
[class^="st-icon-"] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  /* child elements absolute */
  position: relative;
  /* remove inline-block white-space */
  margin-right: -.16em; /* 5px */
  /* if not already universally applied */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger */
  padding: 0.143em;
  /* units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: */
  height: 1.45788em;
  width: 1.45788em;
  font-size: 1.815em;
  /* text hidden old-school */
  text-align: left;
  text-indent: -9999px; }

/* position:absolute stacks pseudo elements - extra <span> in markup = 2 extra pseudo elements */
[class^="st-icon-"]:before,
[class^="st-icon-"]:after,
[class^="st-icon-"] span:before,
[class^="st-icon-"] span:after {
  display: block;
  position: absolute;
  white-space: normal;
  /* match padding above */
  top: 0.143em;
  left: 0.143em;
  /* undo text hidden */
  text-indent: 0;
  /* inherits size from parent, ems cascade */
  font-size: 1em;
  font-family: "Stackicons-Social";
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  /* screenreaders */
  speak: none;
  /* transitions here */ }

.st-icon-amazon:before {
  /* character code - unicode private use area */
  content: "\e079"; /* black "a" */
  color: black; }

.st-icon-amazon:hover:before {
  color: #626262; }

.st-icon-amazon:after {
  content: "\e080"; /* orange smile */
  color: #ff9900; }

.st-icon-amazon:hover:after {
  color: #ffbd59; }

使用 rgba 值，我们甚至可以进行一些颜色混合以获得更多颜色。如果我们真的想要突破限制，可以使用 -webkit-background-clip: text 为图标提供 -webkit-linear-gradient 背景。

是的，这有点像“黑客”手段：它需要一些设计上的预先思考，以及生成字体图标的能力。需要管理更多活动部件。但它也提供了很大的灵活性，尤其是在使用 Sass 变量时。

Stackicons

Stackicons-Social

为了展示其工作原理，我创建了一个免费的开源字体图标，Stackicons-Social，并创建了一个 Sass“构造工具包”来生成单色图标和 60 多个社交品牌的“多色”版本的 CSS。

Stackicons-Social

仅图标方形圆角1圆角2圆角3圆形

多色

查看 Stackicons-Social

我还创建了一系列字体按钮形状，从方形到圆形（以及仅图标），并且可以使用类动态覆盖形状。想要圆形图标？只需添加 .st-shape-circle 类即可。iOS 风格？.st-shape-rounded3.

在 CodePen 上试用

使用 Sass 整合

在幕后，有一组 .scss _partial 文件由 Sass 编译。如果您熟悉 Sass，则只需更改此“构造工具包”中的变量即可广泛定制内容

• fonts-stackicons-social – Stackicons-social 字体的路径。
• colors-social–2014 – 社交品牌的颜色变量。
• unicodes-stackicons-social – 将字体 Unicode 字符抽象为变量。
• construction-kit-stackicons-social – 在这里，我们生成图标大小、边距、填充、形状、颜色、悬停样式等的默认值。（在此处进行操作。）
• css-defaults-stackicons-social – 这会完成创建每个 .st-icon-($brand) 类的 CSS 基础工作。*
• override-shapes-stackicons-social – 允许您使用类覆盖单色图标上的按钮形状：st-shape-square 到 st-shape-circle，以及 st-shape-icon。*
• override-colors-stackicons-social – 单色图标的“颜色样式”示例，以演示不同的选项。有很多额外的 CSS，因此默认情况下已注释掉。*
• multi-color-kit-stackicons-social.scss – 与上面的“构造工具包”类似，但适用于 .st-multi-color 类：生成默认形状、颜色样式等。
• multi-color-css-stackicons-social.scss – 与上面的“css-defaults”类似，这会完成生成每个多色 .st-icon-($brand) 类的 CSS 基础工作。*
• multi-color-override-shapes-stackicons-social – 这允许您使用多色图标上的类更改图标形状。*

* 由于 Sass 不允许我们在变量中使用变量，因此它使用大量的 @if 语句来生成 .st-icon-($brand) 类。很难看，但勉强可以维护。有几个 @each 语句，列出了要输出的品牌。理想情况下，您需要遍历并编辑这些列表，以将 CSS 输出限制为您需要的品牌。

自己动手

有一些很棒的免费资源可用于创建字体图标，包括 icomoon.io 和 fontello.com。我在 Mac 上使用 Adobe Illustrator 和 Glyphs。（Glyphs Mini 是一个更低成本的选择，它将每个 em 的单位限制为 1000。他们也提供学生价格。）为了生成网络字体版本，我推荐 FontPrep，Brian Gonzalez 刚刚将其开源。 FontSquirrel 是另一个不错的免费选项。（如果您有兴趣了解更详细的工作流程，请在评论中告诉我。）

您还应该查看 某个随机家伙（P.J. Onori）及其 标志性项目。他还有一些关于 正确使用字体图标的有用提示。

与往常一样，如果您有任何问题、意见或更正，您可以发送电子邮件至 parker@parkerbennett.com。