写这篇文章的目的:我想在html中使用iconfont图标元素,选择好的图标下载到本地后,引入iconfont.css文件无法直接使用
iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用如下:
使用在线转换工具 Transfonter
注意:
1、原来下载的iconfont.css文件中有三种类型的:woff2、woff、truetype,这里我选择woff作为转换源,即://at.alicdn.com/t/font_3054281_w5vdgulheqa.woff?t=164024673456626(根据你自己下载的,在css文件首页的url里面)
2、在谷歌浏览器中粘贴上述的url,即可下载到本地
3、使用上述的在线转换工具transfonter,点击Add fonts导入上面得本地woff,参考上图勾选既可,最后点击下载
下载本地后解压,取出stylesheet.css,并替换原来iconfont.css文件的对应部分
此时直接取出class(例如icon-delete4)即可正常使用了
<span class="iconfont icon-delete4" style="color: red;font-size: 20px;"></span>