自定义图标库

2年前

浏览次数 436

Icon库，平时用的较多的是fontawesome，fontawesome实际上是一种字体；但是跟字体略有差别，图标的调用方式一般是伪类，在css中

.fa {
font-family: "fontawesome";
}
.fa-imaiko-icon-work:before {
content: "\e09c";
}

其中的Name fa-imaiko-icon-workm对应class类别; Unicode是代码\e09c。 这个代码相当于字体中的ABC123，因为是图标，所以用代码。

使用图标字体的优势很多：更小，颜色方便改，放大不失真；缺点就是坑太深；今天早上入坑，到下午刚刚爬出来。制作定制的图标字体库两个步骤

1. 制作字体库

发现了软件 FontLab 7，可以设计图标，生成woff2等；

也可以新增，编辑，删除等；对应Name 和UniCode；

现代的浏览器Web PS大多支持Woff2字体，导出。

2. 使用图标库

导出后会有一个css文件，我们可以这样引用；

/* Webfont: imaikoicon-Regular */@font-face {
font-family: 'imaiko-icon';
src: url('kosi-icon.woff2') format('woff2'), /* Modern Browsers */
url('kosi-icon.otf') format('opentype'); /* Safari, Android, iOS */
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}

主题给了我们更简易的方法。

1. 在定制图标这里输入字体链接；