最近项目上用到了很多svg图,设计师经常频繁改版,苦不堪言,于是就想到了把图片转成字体库来使用。
3. 上传我们制作的svg图标
4. 点击我的项目,创建一个项目
5. 在我的图标中,批量操作-全选-添加到购物车


字体库引入有三种方式(取自iconfont官网介绍):
unicode引用

unicode是字体在网页端最原始的应用方式,特点是:
第一步:拷贝项目下面生成的font-face
第二步:定义使用iconfont的样式
第三步:挑选相应图标并获取字体编码,应用于页面
“iconfont”是你项目下的font-family。可以通过编辑项目查看,默认是”iconfont”。
font-class引用

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
第一步:引入项目下面生成的fontclass代码:
第二步:挑选相应图标并获取类名,应用于页面:
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
第一步:引入项目下面生成的symbol代码:
第二步:加入通用css代码(引入一次就行):
第三步:挑选相应图标并获取类名,应用于页面:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/183922.html