多个字体图标文件的合成

前言

一直都在使用Iconfont-阿里巴巴矢量图标库中的图标,但是总归是不全的,所以会通过其它
途径获得图标,那么现在就会有多份图标文件,我们该如何去合并它们再应用到项目中去呢?

合并

这个网站IcoMoon可以将.svg的字体图标文件解析出来,并生成新的字体文件包。
操作流程如下:

  1. 点击左上角的Import Icons导入图标
  2. 选中要保留的图标
  3. 点击右下角的Generate Font
  4. 生成成功后点击Download即可

使用

因为项目中之前一直使用Iconfont的图标文件,所以为了不更改大量代码,我们需要将IconMoon导出的字体图标
改成Iconfont的类型,其实很简单,如下:

  1. IconMoon/fonts的四个文件全部重命名为iconfont
  2. IconMoon/style.css中的图标部分全部复制,替换掉iconfont.css中的图标部分。

图标部分的代码形式

1
2
3
.icon-dingdan1:before {
content: "\e600";
}

3.将Iconfont之前的woff改为url('iconfont.woff?t=1532329070422') format('woff'),

1
2
3
4
5
6
7
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1532329070422'); /* IE9*/
src: url('iconfont.eot?t=1532329070422#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1532329070422') format('woff'),
url('iconfont.ttf?t=1532329070422') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1532329070422#iconfont') format('svg'); /* iOS 4.1- */
}

文章作者: Gorkys
文章链接: http://tingtas.com/posts/1fd66b66/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tingtas
打赏
  • 微信
  • 支付宝

评论