icon fonts

Posted 2020-08-21 nihaojs

iconfont网站 http://www.iconfont.cn（推荐） http://fontello.com/ http://fontawesome.io/   https://icomoon.io/

最近的项目使用了图标库，使我对小小的图标有了更深一步的认识。刚开始项目使用了fontawesome图标库，但由于很多跟UI设计的独特图标不一致，最终决定做一个本项目的专用图标库。一段时间内两个图标库会共存，以后逐步替换成自己的图标库。

在阿里iconfont上传ui的svg图建立了该项目的图标专用库。这个还是蛮好用的。http://www.iconfont.cn（推荐）

它可以上传自己的图标，可以收藏，可以建立项目，添加项目小组成员。

它有三种使用方法：

1.unicode码

复制生成的代码：@font-face {font-family: \'iconfontyyy\'; src: url(\'iconfont.eot\'); src: url(\'iconfont.eot?#iefix\') format(\'embedded-opentype\'), url(\'iconfont.woff\') format(\'woff\'), url(\'iconfont.ttf\') format(\'truetype\'), url(\'iconfont.svg#iconfontyyy\') format(\'svg\'); }

自定义样式class名：.iconfontyyy{ font-family:"iconfontyyy" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

页面结构：<i class="iconfontyyy">&#x33;</i>

2.font-class

编辑之后样式自动生成：例如http://at.alicdn.com/t/font_9cd26v04g9pgy14i.css 注意，每次更新图标的样式后路径都要重新替换一次,因为每次的修改生成的样式的名字都是不一样的 

使用：a.复制并引入该css样式链接，b.页面结构：<i class="iconfontyyy icon-xxx"></i>， 加上该图标的class名

3.symbol(svg图，支持不同颜色，仅支持ie9+，渲染svg性能比png稍差)

编辑之后js自动生成：例如http://at.alicdn.com/t/font_1473319176_4914331.js注意，每次更新图标的后路径都要重新替换一次

使用：a.复制并引入该js链接

b.通用的css代码：例如.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

c.页面结构：<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>