自定义图标库

页面设计
浏览次数 133

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相比,少了图标预览。

最终效果

我们将在15分钟内联系你

免费提供行业网站方案以及海外推广计划