uni-app引入字体图标详细步骤

之前自己在学习中不会引入矢量图,在网上搜索方法,没找到一个详细的,自己动手记录一下。

uni-app引入字体图标

1、在案例矢量图官网选择需要的图标进行下载
uni-app引入字体图标详细步骤

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

uni-app引入字体图标详细步骤