uniapp iconfont图标使用
前言
最近在折腾一个uniapp的demo程序,需要用到iconfont图标,但是官网上面无图无真相,对初学者不友好。下面我贴图介绍一下使用过程。
正文如下
1. 选择图标
进入iconfont 阿里巴巴图标库官网: https://www.iconfont.cn/ , 登录后,选择需要的图标,点击购物车
2. 下载代码
选择完成后,点击顶部购物车图标,并点击下载代码
3. 解压下载文件
解压下载文件, 打开demo_index.html, 我们在页面中可看到三种引用方式,今天我们介绍的使用unicode引入
4. 项目中使用
复制两个文件: iconfont.css iconfont.ttf 文件至你的项目目录,我的文件目录结构如下
5. 项目中使用
打开iconfont.css 文件,修改ttf文件地址
在文件中引入css代码
在页面中使用字体图标,图标名称可在iconfont.css中查看
6. 最终效果
效果如下
最后
我还是菜鸡一枚,得多练习呀,加油!
版权声明:
作者:小何
链接:https://ligo100.cn/qianduanjishu/vue/156.html
来源:小何博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论