阿里的iconfont 拥有上千万的图标 链接在这里
并且支持多种格式导出及使用

下面介绍一下我在前端项目中使用iconfont的方法

1.首先将你需要的icon 加入购物车
Iconfont使用字体图标--Unicode
2. 如单个icon 则可直接在购物车页面 点击下载代码
Iconfont使用字体图标--Unicode
如多个icon 则需添加至一个项目
Iconfont使用字体图标--Unicode
然后在个人项目页面 点击下载至本地
Iconfont使用字体图标--Unicode
3.下载完成后 解压下载的压缩包文件
将其中的字体文件 添加至自己前端项目的文件夹中 我这里是添加至font文件夹
Iconfont使用字体图标--Unicode
4.打开解压后的文件中的字体样式,将相应样式代码复制到自己前端文件的css样式中,这里特别注意引入文件时的位置
Iconfont使用字体图标--UnicodeIconfont使用字体图标--Unicode
5.挑选相应图标并获取字体编码,应用于页面。
Iconfont使用字体图标--Unicode
Iconfont使用字体图标--Unicode
并且可以通过 fontsize 来改变icon的大小

具体的操作也可以查看解压文件夹下的demo示例操作
Iconfont使用字体图标--Unicode
Iconfont使用字体图标--Unicode

相关文章: