图标字体的 5 种应用场景

以下是 Tim Pietrusky 的客座文章。Tim 知道此网站长期以来一直提倡使用字体作为图标，并且有自己一些有趣的用例需要分享。在创建演示时，为了方便自己，他创建了一项免费的图标字体托管服务。这也可以作为社区的一份不错礼物。我让他来告诉大家吧……

图标字体很棒

• 您可以用 CSS 对它们进行各种处理，而它们毫不在意
• 它们在任何显示器或分辨率下看起来都很好
• 对于任何大小的图标集，只有一个 HTTP 请求

让我们看看图标字体的 5 个典型用例。

开始之前

为了使示例代码简洁易读，我们不会使用任何供应商前缀。我们将使用动画、过渡和变换等功能，所有这些功能都需要供应商前缀才能确保最佳的浏览器支持。您如何处理供应商前缀由您决定。

正如您将在示例中看到的，我使用了图标字体托管服务 weloveiconfonts.com。这是我自己的项目。事情是这样的：我想写一篇关于图标字体的文章，并搜索免费的图标字体托管服务，但没有找到。所以我创建了这项服务以便能够撰写这篇文章。

1. CSS 加载器

有很多 很棒的、纯粹的 CSS 加载器，您甚至可以在 cssload.net 上创建自己的加载器。另一种方法是使用 图标字体。您可以使用看起来像加载符号的字符，并使用 CSS 对其进行动画处理。

这是基本的 HTML。前三个加载器是 div.wrapper 的子元素，并且是单个元素。第四个 (div.complex) 是两个图标的组合。

<div class="wrapper">
  <span class="fontelico-spin1"></span>
  <span class="fontelico-spin3"></span>
  <span class="fontelico-spin5"></span>
</div>

<div class="complex">
  <span class="fontelico-emo-devil"></span>
  <span class="fontelico-spin4"></span>
</div>

将图标字体 Fontelico 导入到您的 CSS 中

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

将名为 load 的动画添加到元素，它会使它们旋转（从 0deg 到 360deg），稍微放大和缩小，并更改颜色。

/* Normal (left) */
span {
  float: left;
  text-align: center;
  margin: 0 5em;
  animation: load 1.337s infinite ease-out reverse;
}
/* Fast (center) */
.wrapper span:nth-child(2) {
  animation: load .5s infinite linear;
}
/* Steps (right) */
.wrapper span:nth-child(3) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
@keyframes load {
  0% {
    transform: rotate(0) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
  10% { color: rgba(0, 120, 0, .5); }
  20% { color: rgba(0, 120, 120, .5); }
  30% { color: rgba(120, 120, 0, .5); }
  40% { color: rgba(0, 0, 120, .5); }
  50% {
    transform: rotate(180deg) scale(1.85, 1.85);
    color: rgba(120, 0, 0, .5);
  }
  100% {
    transform: rotate(360deg) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
}

最后一个加载器 (div.complex) 组合了两个图标，并将它们堆叠在一起。第一个子元素是恶魔元素（使用名为 rotate 的动画），第二个子元素是旋转图标（使用名为 scale 的动画）。

.complex span:nth-child(1),
.complex span:nth-child(2) {
  position: absolute;
  margin: 0;  
  width: 1em;
  height: 1em;
}
/* Devil icon  */
.complex span:nth-child(1) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
/* Spin icon */
.complex span:nth-child(2) {
  font-size: 3em;
  left: -.35em;
  top: -.35em;
  color: rgba(0, 0, 0, .3);
  animation: devil 3s infinite linear reverse forwards;
}
@keyframes devil {
  0% {
    transform: scale(-1.85, 1.85);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(-1.85, 1.85);
  }
}

演示 在 CodePen 上

2. SocialCount 遇见样式

人们喜欢在他们的网站上使用社交分享按钮，以便访客更容易传播信息。但是，当您结合使用 Facebook、Twitter 和 Google+ 时，您将面临 309KB 的空缓存加载大小。这就是 SocialCount jQuery 插件 的用武之地。SocialCount 具有渐进增强、延迟加载和移动友好等特性。

默认样式很简单，包含按钮的 iframe 很小。让我们用一些花哨的 CSS 来增强这些按钮。

这是使用 SocialCount 标记生成器 创建的 HTML。只是一个包含链接和图标的无序列表。

<ul
  class="socialcount"
  data-url="http://www.google.com/"
  data-counts="true"
  data-share-text="Google is a search engine">
 
  <li class="facebook">
    <a href="https://#/sharer/sharer.php?u=http://www.google.com/" title="Share on Facebook">
      <span class="count entypo-thumbs-up"></span>
    </a>
  </li>

  <li class="twitter">
    <a href="https://twitter.com/intent/tweet?text=http://www.google.com/" title="Share on Twitter">
      <span class="count entypo-twitter"></span>
    </a>
  </li>

  <li class="googleplus">
    <a href="https://plus.google.com/share?url=http://www.google.com/" title="Share on Google Plus">
        <span class="count entypo-gplus"></span>
    </a>
  </li>

</ul>

将图标字体 Entypo 导入到您的 CSS 中

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font: 2.5em/1.9em 'entypo', sans-serif;
}

我们将通过以下方式覆盖 SocialCount 提供的默认样式：

• 添加过渡
• 缩放 iframe
• 在按钮上设置自定义背景

.socialcount {
  > li {
    width: 33%;
    border-radius: 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
   
    &:hover [class*="entypo-"]:before {
      opacity: 0;  
    }
  }
 
  iframe {
    transform: scale(1.65, 1.65);    
  }
 
  .button {
    top: 50%;
    margin: -.75em 0 0 0;
    height: 2em;
  }
 
  .facebook {
    background: rgba(59, 89, 152, .7);
  }
   
  &.like .facebook iframe {
    width: 8em;
  }
 
  .twitter {
    background: rgba(0, 172, 237, .7);  
  }
 
  .googleplus {
    background: rgba(172, 0, 0, .7);  
  }
}

演示 在 CodePen 上

3. 增强的列表

以下三个示例均基于此简单的 HTML。

<div>
  <h2>Title</h2>
  <ul class="style">
    <li data-text="">Text</li>
    <li data-text="">Text</li>
    <li data-text="">Text</li>
  </ul>
</div>

将图标字体 Font Awesome 导入到您的 CSS 中

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

添加列表、列表元素、伪元素和按钮的默认样式。我们不使用类来在列表元素上设置图标，而是更改元素的 content 属性，从而创建一个伪元素。

ul {
  list-style: none;
  padding: 0;
   
  li {
    position: relative;
    min-height: 2em;
    padding: .3em .3em .3em 1.5em;
    transition:
      background .3s ease-in-out,
      color .3s ease-in-out,
      box-shadow .1s ease-in-out,
      height .25s ease-in-out
   ;
   
    button {
      position: absolute;
      left: 1.45em;
      bottom: .35em;
      opacity: 0;
      height: 0;
      border: none;
      font-size: .8em;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
   
    &:before {
      position: absolute;
      top: .425em;
      font-family: 'FontAwesome', sans-serif;
      margin: 0 .35em 0 -1.35em;
      vertical-align: bottom;
    }
    &:hover {
      button {
        opacity: 1;
        height: 2em;
      }
     
      &:before {
        color: rgba(255, 255, 255, 1);
        right: 0;
        transform: scale(2.5, 2.5) translate(-.25em, .15em);
      }
      &:after {
        position: absolute;
        content: attr(data-text);
      }
    }
  }
}

3.1 您喜欢的东西

第一个示例非常简单。使用心形代替默认列表样式，并使用特殊的悬停效果：图标移到右侧，::after 伪元素获取 data-attribute data-text 的文本。

.love {
  li {  
    &:before {
      /* fontawesome-heart */
      content: "\f004";
    }
    &:before,
    &:after {
      color: rgba(220, 20, 20, .6);
    }
    &:hover {
      background: rgba(220, 20, 20, .6);
   
      &:after {
        width: 2em;
        right: .445em;
      }
    }
  }
}

3.2 下载

这是一个带有扩展标记的自定义下载列表：每个列表元素都有一个链接和一个按钮。按钮默认隐藏，并在悬停时显示。

.downloads {
  li {
    border-bottom: .15em solid rgba(0, 0, 0, .3);
   
    &:before {
      /* fontawesome-download-alt */
      content: "\f019";
      color: rgba(50, 50, 50, .5);
    }
    &:hover {
      background: rgba(0, 140, 0, .7);
      height: 4em;
   
      &:after {
        right: .35em;
      }
     
      &:before {
        color: rgba(255, 255, 255, .2);
      }
    }
  }
}

3.3 您的帐户

用户菜单的 UI 概念。当您将鼠标悬停在列表元素上时，图标将移到右侧，并且阴影框会填充整个背景。每个列表元素都有自己的图标，基于 :nth-child 选择器和 content 属性。

.account {
  padding: .75em;
  border: .15em solid rgba(0, 0, 0, .2);
  background-color: rgba(0, 0, 0, .7);
  background-image: radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
  box-shadow: inset 0 0 .35em 0 rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6);
  backface-visibility: hidden;
   
  li {  
    cursor: pointer;
       
    &:nth-child(1):before {
      /* fontawesome-heart-empty */
      content: "\f08a";
    }
    &:nth-child(2):before {
      /* fontawesome-glass */
      content: "\f000";
    }
    &:nth-child(3) {
      margin-bottom: 1em;
     
      &:before {
      /* fontawesome-comment */
        content: "\f075";
      }
    }
    &:nth-child(4) {
      margin-bottom: .5em;
     
      &:before {
      /* fontawesome-cog */
         content: "\f013";
      }
    }
    &:nth-child(5):before {
      /* fontawesome-signout */
      content: "\f08b";
    }
    &:hover {
      color: rgba(255, 255, 255, 1);
      padding-left: 1.5em;
      box-shadow: inset 0 0 0 10em rgba(255, 255, 255, .5);
   
      &:before {
        color: rgba(255, 255, 255, 1);
        transform: none;
      }  
    }
  }
}

所有三种列表类型的演示 在 CodePen 上

4. Emocons.js jQuery 插件

Emojons.js 是一个 jQuery 插件，它搜索元素内容中的特定字符序列。所有匹配项都将替换为 span 和相应图标的 HTML 类。例如，一个聊天应用程序

<div class="chat">
    :D :) ;) :'( :o :/ :( B) :P :|
    :beer: :devil: :shoot: :coffee: :thumbsup: :angry: :ueber-happy:
</div>

然后在您的元素上调用 Emocons.js 插件方法

$('.chat').emocons();

聊天中的所有元素现在都转换为类似这样的内容

<span class="fontelico-emo-grin go" title=":D"></span>

将图标字体 Fontelico 导入到您的 CSS 中

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

当 Emocons.js 将字符串转换为表情符号时，它会将类 go（调用动画）添加到 span 元素。

.go {
  animation: hey .55s 1 linear;
}
@keyframes hey {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(1, 1);
  }
}

一些表情符号会获得特殊的样式（例如颜色更改）或通过 ::after 伪元素添加一些内容。

.fontelico-emo-devil {
  color:rgba(180, 0, 0, .9);
}
.fontelico-emo-beer:after {
  box-shadow:
    -.475em .75em 0 .275em rgba(220, 220, 0, 1),
    -.185em .675em 0 .175em rgba(220, 220, 0, 1)
  ;    
}
.fontelico-emo-coffee:after {
  box-shadow:
    -.475em .78em 0 .235em rgba(222, 184, 135, 1),
    -.215em .715em 0 .155em rgba(222, 184, 135, 1)
  ;    
}
.fontelico-emo-shoot:after {
  border-radius: .15em;
  box-shadow: .315em .525em 0 .1em rgba(0, 0, 0, 1);    
}
.fontelico-emo-angry:after {
  border-radius: .15em;
  box-shadow: -.695em .455em 0 .085em rgba(0, 220, 0, .6);
  z-index: 2;
}

演示 在 CodePen 上

5. 视差电影 #1337

最后一个示例仅供娱乐。它只是一个实验，旨在使用一个图标字体创建无限视差电影。HTML 由许多元素组成以创建场景

• 设置：天空、地面、夜晚和太阳
• 固定元素：自行车
• 动画元素：树木、长颈鹿、购物车、建筑物和直升机坪

<div class="night"></div>
<div class="wrapper">
  <div class="sun">
    <div class="maki-fast-food"></div>
  </div>
 
  <div class="sky"></div>
  <span class="maki-bicycle"></span>
   
  <span class="maki-tree-1" data-child="1"></span>
  <span class="maki-tree-1" data-child="2"></span>
  <span class="maki-tree-1" data-child="3"></span>
   
  <span class="maki-giraffe"></span>
  <span class="maki-grocery-store"></span>
   
  <span class="maki-commerical-building" data-child="1"></span>
  <span class="maki-commerical-building" data-child="2"></span>
   
  <span class="maki-heliport"></span>
   
  <div class="ground"></div>
</div>

将图标字体 Maki 导入到您的 CSS 中

@import url(http://weloveiconfonts.com/api/?family=maki);
[class*="maki-"] {
  position: absolute;
  margin: 0;  
  color: #fff;
  font-size: 2em;
}
[class*="maki-"]:before{
  font-family: 'maki', sans-serif;
}
*:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: -1;
  width: 0;
  height: 0;
}

包装器将整个场景旋转 -3deg。

.wrapper {
  height: 140%;
  width: 120%;
  transform: rotate(-3deg) translate(-10%, -15%);    
}

当太阳落下时，夜晚升起。

.night {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  animation: night 45s infinite forwards;
}
@keyframes night {
  0%, 30%, 100% {background:rgba(0, 0, 0, 0);}  
  55% {background: rgba(0, 0, 0, .6);}
}

天空和地面都使用相同的background-position动画，但速度不同。

.sky {
  position: relative;
  z-index: 0;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 25s linear infinite forwards;
}
.ground {
  position: absolute;
  z-index: 1;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 7s linear infinite forwards;
}
@keyframes rollin-bg {
  0% { background-position: 100%; }  
  100% { background-position: 0; }
}

在圆形路径上移动元素这是一篇来自Lea Verou的精彩文章，这里用来为汉堡包太阳制作动画。

.sun {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 10%;
  width: 2em;
  height: 2em;
  font-size: 4em;
  line-height: 1;
  animation: circle 45s linear infinite;
  transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
  color: rgba(240, 180, 0, .2);
  text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
  animation: inner-circle 45s linear infinite;
}
@keyframes circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes inner-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

这是唯一一个没有动画的元素。但它应该看起来像在移动。

.maki-bicycle {
  left: 50%;
  z-index: 4;
  margin: -.85em 0 0 -.5em;
  color: rgba(30, 30, 140, .95);
}

这里有一些动画元素，它们都使用相同的滚动动画，但速度不同。

.maki-tree-1[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 5;
  animation: rollin 5s linear infinite;
  font-size: 2.4em;
  color: rgba(0, 110, 0, .8);
}
.maki-tree-1[data-child="2"] {
  margin: -1em 0 0 85%;  
  z-index: 2;
  animation: rollin 12s linear infinite;
  font-size: 1.6em;
  color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
  margin: -1em 0 0 25%;  
  z-index: 2;
  animation: rollin 17s linear infinite;
  font-size: 1.2em;
  color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
  margin: .25em 0 0 5%;  
  z-index: 6;
  animation: rollin 12s linear infinite reverse;
  font-size: 10em;
  color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
  right: -3em;
  content: '\e82a \e82a \e82a \e82a \e82a';
  font: .2em 'Maki', sans-serif;
  letter-spacing: .2em;
  width: 3em;
  color: rgba(0, 0, 0, .6);
  box-shadow:
    0 .45em 0 .75em rgba(255, 255, 255, .4),
    1em .35em 0 .75em rgba(255, 255, 255, .4),
    2.25em .25em 0 1.05em rgba(255, 255, 255, .4)  
  ;
  border-radius: 50%;
  transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
  margin: -.35em 0 0 5%;
  z-index: 5;
  animation: rollin 22s linear infinite;
  font-size: 4em;
  color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 3;
  animation: rollin 6s linear infinite;
  font-size: 7em;
  color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
  margin: -1em 0 0 5%;
  z-index: 2;
  animation: rollin 14s linear infinite;
  font-size: 4em;
  color: rgba(0, 120, 120, .4);
}
.maki-heliport {
  margin: -3.5em 0 0 2em;  
  z-index: 1;
  color: rgba(30, 30, 30, .45);
  font-size: 1.25em;
  animation: rollin 26s linear infinite reverse 2s;
}
@keyframes rollin {
  0% {margin-left:105%}  
  100% {margin-left:-15%;}
}

演示在CodePen上查看

进一步阅读

感谢您的时间！当然，这并不是您可以使用图标字体做到的全部。不要害怕自己去尝试。

• 图标字体使用的HTML查看文章 / Pictos关于使用图标字体的文章
• 使用unicode-range的无标记图标字体
• Animicons：使用图标字体的精灵动画
• 多色字体图标
• IcoMoon / Fontello
• Font Squirrel @font-face 生成器
• 扁平化图标和图标字体的完整列表