阿里巴巴矢量图标库在uni-app中的使用方法

开发工具为:HBuilderX

步骤1:

先将喜欢的字体图标加入购物车中

 点击购物车然后点击添加至项目

 有就选择没有就新建

步骤2:

1.将项目文件下载至本地

 2.打开下载到本地的项目文件,将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入,方便管理)

3.打开iconfont.css文件,然后将顶部 @font-face{} 

替换为你的项目中Unicode下的 @font-face{}

4.然后在App.vue中声明

 步骤3:

在页面中使用<text></text>

两种方式:

第一种 Unicode中在图标上点复制代码  &#xe61a;

第二种 Symbol中在图标上点复制代码  icon-icon-03_ji

(因为是字体图标所以它并不能显示颜色,如果需要显示颜色需要下载另外的插件) 

打开命令提示符执行该命令

npm install -g iconfont-tools

切换到刚才下载到本地的项目文件目录下执行该命令

iconfont-tools (一直回车就行)

执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复步骤2中的2和4(只要该文件夹中的 .css文件)

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 10:44:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 10:44:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 10:44:04       82 阅读
  4. Python语言-面向对象

    2024-01-18 10:44:04       91 阅读

热门阅读

  1. uni-app qiun-data-charts无法显示tooltip

    2024-01-18 10:44:04       47 阅读
  2. 开发安全之:Cookie Security: Cookie not Sent Over SSL

    2024-01-18 10:44:04       50 阅读
  3. 将一个数组中的元素轮转

    2024-01-18 10:44:04       50 阅读
  4. 03 SpringBoot整合MVC+Application.yaml的Web配置

    2024-01-18 10:44:04       57 阅读
  5. .Net 全局过滤,防止SQL注入

    2024-01-18 10:44:04       55 阅读
  6. apache seatunnel web 安装部署

    2024-01-18 10:44:04       56 阅读
  7. 有关引入介绍

    2024-01-18 10:44:04       55 阅读