uniapp iconfont图标使用

前言

最近在折腾一个uniapp的demo程序,需要用到iconfont图标,但是官网上面无图无真相,对初学者不友好。下面我贴图介绍一下使用过程。

正文如下

1.  选择图标

进入iconfont 阿里巴巴图标库官网: https://www.iconfont.cn/ , 登录后,选择需要的图标,点击购物车

%title插图%num

2.  下载代码

选择完成后,点击顶部购物车图标,并点击下载代码

%title插图%num

%title插图%num

3.  解压下载文件

解压下载文件, 打开demo_index.html,  我们在页面中可看到三种引用方式,今天我们介绍的使用unicode引入

%title插图%num

4.  项目中使用

复制两个文件: iconfont.css iconfont.ttf 文件至你的项目目录,我的文件目录结构如下

%title插图%num

5.  项目中使用

打开iconfont.css 文件,修改ttf文件地址

%title插图%num

在文件中引入css代码

%title插图%num

在页面中使用字体图标,图标名称可在iconfont.css中查看

%title插图%num

6. 最终效果

效果如下

%title插图%num

 

最后

我还是菜鸡一枚,得多练习呀,加油!

 

版权声明:
作者:小何
链接:https://ligo100.cn/qianduanjishu/vue/156.html
来源:小何博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录