FontAwesome 通过组合创建新图标

复合使用 FontAwesome 图标,创建符合需求的新图标。比如把“图片(fa-picture-o)”和“加(fa-plus-circle)”叠到一起,就可以创造”新增图片“的图标。

FontAwesome 提供了很多好看的图标,使用 WebFont 嵌入页面更是简单又好用,所以我基本上一直用它。不过有时候还是觉得不太够用,这就需要复合使用多个图标。

下面是个例子,我在图标的右下角增加一个圆形加号,表示增加、创建。

See the Pen add icon by Meathill (@meathill) on CodePen.

这里有两个选择:

  1. FontAwesome 提供了一个堆叠图标的样式:fa-stack,可以堆叠任意多的图标。
  2. 因为它实际上只占用了 :before,所以也可以使用 :after 来容纳新增的图标。如果只需要两个图标,这个方式更简单。