Icommon

Icommon生成自定义字体

Posted by Mickey on March 6, 2018

今天发现同事将项目中的裸svg文件替换成了一套字体,觉得十分好用,于是请教了一下,接触了Icommon这个网站(原谅我孤陋寡闻),今天小试了一下,感觉不错,赶紧分享一下,造福大家。那么Icommon究竟是干啥的呢?接下来简要介绍一下

就我个人而言,往往要想找点什么ICON素材,不是去阿里妈妈拔一拔png文件,就是去FontAwesome引入在线素材库,而我接下来要介绍的Icommon,就是用来生成类似FontAwesome的图标字体

准备自定义ICON素材

需要注意的是,Icommon的素材格式必须为SVG格式,且svg中不能有path标签

生成图标字体

  • 打开Icommon网站,点击’import icons’上传SVG文件
  • 去掉Iconmoon提供的免费图标 1.jpg
  • 点击set右边的编辑按钮 2.jpg
  • remove图标本来的颜色,修改set名称 3.jpg
  • 点击set右边的编辑按钮,点击Select All,选中上传的全部svg
  • 素材添加完成后,点击右下角Generate Font按钮进入属性设置页面
  • 点击Perferences按钮,进行字体属性设置,可以设置字体的名称,字体样式名称,浏览器的兼容性,是否生成less文件等 4.jpg
  • 点击页面右下方的Download按钮打包下载所有资源
  • 解压下载后的压缩包,可以得到以下的文件夹,其中包括demostyle.cssfonts文件中的字体文件

在项目中引用

  • 将所要用的css及字体文件放到一个文件夹中
  • 在html文件中引入css
  • 在需要的页面引用,直接使用<i class="icon-svg"></i>即可