Stackicons：使用图标字体做更多的事情-CSDN博客

以下是Parker Bennett的特邀帖子。 尽管图标字体高效，易于使用，可缩放，并且所有这些，但针对它们的经典“警示”之一是图标只能是一种颜色。 派克有一个全新的项目，可以通过简单而巧妙的方式解决该问题。 我让他为您介绍一下。

即使图标的未来很可能是SVG ，但在目前，这里的图标字体仍然提供了一种引人注目的替代方法-颜色，大小，文本阴影，悬停效果等超级简单的样式，仅使用CSS即可。图标字体仍然很棒。

SVG与图标字体相比的一大优势是全彩。但是图标字体不必仅限于单一颜色。通过重叠两个或多个元素，我们可以创建具有现代平面外观的独特“多色”图标。如果您曾经做过两种颜色或丝网印刷，这是一个相似的想法。

我称它们为Stackicons 。

→ 运球

→ Github

对于每种颜色，我们使用一个单独的伪元素，然后使用绝对定位将它们堆叠在一起。（如果要使用两种以上的颜色，则将花费非语义范围。）

/* @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 &lt;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

：hover效果在SVG中很难做到

Stackicons-社交

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

Stackicons-社交

仅图标的正方形 rounded1 rounded2 rounded3 圆

彩色

查看Stackicons-社交

我还在字体中创建了一系列按钮形状，从正方形到圆形（仅带有图标），并且具有可即时覆盖形状的类。想要圆形图标吗？只需添加.st-shape-circle类。 iOS风格？ .st-shape-rounded3.

在CodePen上尝试

与Sass放在一起

在幕后，有一组由Sass编译的.scss _partial文件。如果您对使用Sass感到满意，则可以通过更改此“构造工具”中的变量来广泛地自定义内容：

fonts-stackicons-social –指向stackicons-social字体的路径。
colors-social–2014 –社交品牌的颜色变量。
unicodes-stackicons-social –抽象为变量的字体unicode字符。
construction-kit-stackicons-social –这是我们生成图标大小，边距，填充，形状，颜色，悬停样式等的默认值的地方（在此处播放。）
css-defaults-stackicons-social -CSS进行此工作以创建每个.st-icon-（$ brand）类。*
Override-shapes-stackicons-social –让我们使用以下类覆盖单色图标上的按钮形状：st-shape-square到st-shape-circle，再加上st-shape-icon。*
overlay-colors-stackicons-social-单色图标的“颜色样式”的一些示例，以演示不同的选项。许多其他CSS，因此默认情况下已注释掉。*
multi-color-kit-stackicons-social.scss –与上面的“ construction-kit”类似，但对于.st-multi-color类：生成默认形状，颜色样式等。
multi-color-css-stackicons-social.scss –就像上面的“ css-defaults”一样，它会执行CSS grunt来生成每个多色.st-icon-（$ brand）类。
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是另一个不错的免费选项。（如果您对更多工作流程的详细信息感兴趣，请在评论中告诉我。）

您还应该查看一些随机花花公子（PJ Onori）及其标志性项目。他还提供了一些有关使用图标字体的有用提示。

与往常一样，如果您有任何问题，评论或更正，请给我发送电子邮件至parker@parkerbennett.com 。