美文网首页
多个字体图标文件的合成

多个字体图标文件的合成

作者: Gorkys | 来源:发表于2018-07-26 14:48 被阅读0次

    前言

    一直都在使用Iconfont-阿里巴巴矢量图标库中的图标,但是总归是不全的,所以会去其它](http://www.iconfont.cn/)中的图标,但是总归是不全的,所以会去其它地方)

    网站下载图标,那么现在就会有多份图标文件,我们该如何去合并它们再应用到项目中去呢?

    合并

    这个网站IcoMoon可以将.svg的字体图标文件解析出来,并生成新的字体文件包。](https://icomoon.io/app/#/select)可以将.svg的字体图标文件解析出来,并生成新的字体文件包。)

    操作流程如下:

    1.点击左上角的Import Icons导入图标

    2.选中要保留的图标

    3.点击右下角的Generate Font

    4.生成成功后点击Download即可

    使用

    因为项目中之前一直使用Iconfont的图标文件,所以为了不更改大量代码,我们需要将IconMoon导出的字体图标

    改成Iconfont的类型,其实很简单,如下:

    1.将IconMoon/fonts的四个文件全部重命名为iconfont

    2.将IconMoon/style.css中的图标部分全部复制,替换掉iconfont.css中的图标部分。

    图标部分的代码形式

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

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

    
    <pre style="margin: 8px 0px; color: rgb(207, 191, 173); font-family: 宋体; font-size: 1rem; background-color: rgb(39, 40, 34);">@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- */ }</pre>
    
    

    相关文章

      网友评论

          本文标题:多个字体图标文件的合成

          本文链接:https://www.haomeiwen.com/subject/jkjbmftx.html