web端iconfont使用
引用方式:
1.unicode 引用 (不支持多色,支持按字体的方式去动态调整图标大小,颜色)
2.font-class 引用 (unicode使用方式的一种变种,语意明确,容易分辨是哪个icon,本质上还是使用的字体,所以多色图标还是不支持的)
3.symbol 引用(全新的使用方式,未来的主流,推荐用法。支持多色图标、支持像字体那样来调整样式)
兼容性 unicode > font-class > symbol
引用详解:
方式一、unicode 引用(下载到本地)
①添加想要的图标到库,右上角购物车将图标加入到想要加入的项目中(或者新建的项目中)
②下载项目中图标至本地,解压下载的压缩包,将下载文件放入到static文件夹中(带demo字样的是详细配置说明文件,不用引入)
③引用图标css文件
运行会报错文件查找失败:'./iconfont.ttf?t=1642736921417'
是因为在iconfont.css里面要使用绝对路径,不能使用相对路径(举例修改如下图,需要根据自己文件所放位置修改为对应格式路径)
④在需要图标的地方使用图标,类名为iconfont,图标名称也可以通过复制直接拿到
<i class="iconfont"></i>
运行如图:
方式二、unicode 引用(在线链接)
①复制在线链接
②定义使用iconfont的样式并全局引用
③在需要图标的地方使用图标,类名为iconfont,图标名称也可以通过复制直接拿到
<i class="iconfont"></i>
运行如图:
方式三、font-class 引用
①拷贝项目下面生成的font-class代码
②引用图标css文件
③使用图标,挑选相应图标并获取类名,应用于页面
方式四、symbol 引用
uniapp不支持symbol多色图标,需要使用工具iconfont-tools进行处理
①以symbol方式下载到本地
②安装iconfont-tools(windows+R,cmd打开dos窗口,安装iconfont-tools)
执行命令为:npm install -g iconfont-tools
③将下载压缩包解压,取出iconfont.js文件,将iconfont.js文件放入iconfont-tools文件夹下(iconfont-tools在node安装路径下\node_global\node_modules\内,我是将nodejs安装在F盘下)
④命令提示符执行命令:iconfont-tools,一直回车使用默认设置就好,执行完毕后iconfont-tools文件夹下会生成iconfont-weapp文件夹。
⑤将iconfont-weapp文件夹中的iconfont-weapp-icon.css放至static静态资源文件夹下,并全局引用该css文件。
⑥根据图标实际名称使用图标,注意要带上t-icon。
使用效果如下: