9.1.7　多图叠加

另外一个比较令人赞叹的特性是，Font Awesome的图标支持多个叠加在一起组成复合特效的图标，而使用这个特性只需要多应用两个样式即可。示例如下：

  1. <span class="icon-stack">
  2.     <i class="icon-check-empty icon-stack-base"></i>
  3.     <i class="icon-twitter"></i>
  4. </span>在icon-check-empty上应用icon-twitter<br>
  5.  
  6. <span class="icon-stack">
  7.     <i class="icon-circle icon-stack-base"></i>
  8.     <i class="icon-flag icon-light"></i>
  9. </span>在icon-circle上应用icon-flag，并设置icon-flag为icon-light白色<br>
  10.  
  11. <span class="icon-stack">
  12.     <i class="icon-sign-blank icon-stack-base"></i>
  13.     <i class="icon-terminal icon-light"></i>
  14. </span>在icon-sign-blank上应用icon-terminal，并设置
  15.     icon-terminals为icon-light白色

上述代码通过组合6个不同的图标，可以形成3个新的复合图标，如图9-7所示。看起来很不错吧？

9.1.7　多图叠加 - 图1 图9-7　多图叠加效果

上述效果用到了两个样式：icon-stack（作为容器样式）、icon-stack-base（作为底部样式）。源码如下：

  1. // 源码244行
  2. /* Stacked and layered icon */
  3. .icon-stack {
  4.     position: relative;
  5.     display: inline-block;
  6.     width: 2em;
  7.     height: 2em;
  8.     line-height: 2em;
  9.     vertical-align: -35%;
  10. }
  11. .icon-stack [class^="icon-"],
  12. .icon-stack [class*=" icon-"] {
  13.     display: block;
  14.     text-align: center;
  15.     position: absolute;                 /* 相对于icon-stack-base元素绝对定位 */
  16.     width: 100%;
  17.     height: 100%;
  18.     font-size: 1em;
  19.     line-height: inherit;
  20.     *line-height: 2em;
  21. }
  22. .icon-stack .icon-stack-base {
  23.     font-size: 2em;
  24.     *line-height: 1em;
  25. }