uniapp使用iconfont字体图标

た 入场券 2021-07-24 13:40 811阅读 1赞

情景1：使用灰色的字体图标

在这里插入图片描述

步骤1：下载iconfont在这里插入图片描述

步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下
在这里插入图片描述

步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除
删除前的css：
在这里插入图片描述

删除后的css：
在这里插入图片描述
步骤4：引入：
注意:src字段的url的括号内一定要使用单引号
①引入位置：你可以直接在app.vue内引入；也可以在main.js内引入；也可以在你的某个组件下引入。
②引入的方式：你可以直接style最上层 @import url()引入；也可以直接将刚才修改的iconfont.css直接整体复制一份在style最上层引入。

@import url()引入图解:
在这里插入图片描述

复制iconfont.css方式引入
在这里插入图片描述

步骤5:使用
点击之前解压后的html文件,找到Font Class
在这里插入图片描述

代码:在这里插入图片描述

页面:在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，811人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uni-app中使用iconfont字体图标

    在一些项目中，我们需要使用阿里巴巴矢量字体图标库的图标，如果单个下载势必过于麻烦，这个就是自己创建好然后进入即可。 第一步，找到阿里巴巴矢量字体图标库，登录官网 。把你需要的

    - 日理万妓- 日理万妓/ 0 赞/ 212 阅读