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. 在定制图标这里输入字体链接;
在对应的页面输入指定图标的css代码。也就是建立Name和Unicode之间的联系;
这样在编辑器中就可以直接输入Name了,跟默认的fontawesome相比,少了图标预览。
最终效果