uni-app引入字体图标详细步骤
之前自己在学习中不会引入矢量图,在网上搜索方法,没找到一个详细的,自己动手记录一下。
uni-app引入字体图标
1、在案例矢量图官网选择需要的图标进行下载
2、得到如下文件
3、将将文件中的六个文件放进项目里面,就是下面截图的那六个即可
4、在全局App.vue中引入
引入后会报如下错误
5、解决方式
进入你引入的字体图标中的iconfont.css
中注意下下图标红的地方路径需要修改一下就号了。
6、按照如下图的修改方式即可解决
[email protected]:是固定写法
static:就是存放字体图标的文件的文件夹
icon:是字体图标的文件夹
7、然后就可以在页面正常使用了
在下载的字体图标的文件中店家那个html文件进入如下页面
复制你需要使用的字体图标对应的类名iconfont``必须加上,
iconfont```后面的类名就是你要使用的字体图标的类名