uniapp-自定义本地图标字体(1)

自定义本地图标字体

  • 1、下载阿里云图标库
    • a.搜索图标
    • b.添加到项目
    • c.下载并解压(得到一个**download.zip**压缩文件)
    • d.解压文件 --> 文件夹文件介绍
  • 2、uniapp配置自定义步骤
    • a.创建两个文件夹
    • b.添加**自定义图标**到项目中
    • c.修改App.vue文件配置
    • d.修改iconfont.css中图标路径(本地路径)
    • e.测试是否成功

1、下载阿里云图标库

a.搜索图标

uniapp-自定义本地图标字体(1)_第1张图片

b.添加到项目

uniapp-自定义本地图标字体(1)_第2张图片

c.下载并解压(得到一个download.zip压缩文件)

uniapp-自定义本地图标字体(1)_第3张图片

d.解压文件 --> 文件夹文件介绍

uniapp-自定义本地图标字体(1)_第4张图片

2、uniapp配置自定义步骤

a.创建两个文件夹

项目目录:**common**
项目目录>static文件夹:iconfonts

uniapp-自定义本地图标字体(1)_第5张图片

b.添加自定义图标到项目中

下载资源中
iconfont.css ----> common文件夹
iconfont.woff
iconfont.ttf ----> static/iconfonts/
iconfont.svg
uniapp-自定义本地图标字体(1)_第6张图片

c.修改App.vue文件配置

导入图标
uniapp-自定义本地图标字体(1)_第7张图片

d.修改iconfont.css中图标路径(本地路径)

uniapp-自定义本地图标字体(1)_第8张图片

e.测试是否成功

uniapp-自定义本地图标字体(1)_第9张图片
效果
uniapp-自定义本地图标字体(1)_第10张图片
至此完成!

你可能感兴趣的:(css样式,uni-app,vue.js)