flutter中使用阿里巴巴图标

1.在官网添加想要的图标到购物车,如下图,点击下载代码

在这里插入图片描述

在这里插入图片描述
下载的文件目录如下
在这里插入图片描述

2.在项目的的根目录文件夹下,新建文件名字为fonts

把上面的json文件和ttf文件放入到里面
在这里插入图片描述

3.pubspec.yaml文件中配置图标

需要注意缩进,放在flutter下,和图片资源同级下.
family:的名字随便起,目的是下面用来区分,所设置的图标在哪个ttf文件下
在这里插入图片描述
如果有多个ttf文件追加即可,如下图
在这里插入图片描述

4.在项目的lib文件下,新建一个dart文件

假设为fontIcon.dart,名字随意,添加代码如下,注意fontFamily要设置对,和配置文件所定义的要一致
下面的geren 为图标名

import 'package:flutter/material.dart';
class FontIcon {
   
  static const IconData geren = const IconData(0xe641,fontFamily: "myPageList");

}

其中0xe641是怎么来的:0x是固定写法,找到之前的json文件,复制图标对应的unicode,如下图
在这里插入图片描述

5.使用

FontIcon.geren 
或者
Icon(FontIcon.geren )

相关推荐

  1. 阿里实习面经

    2023-12-28 17:58:02       20 阅读
  2. 阿里全球数学竞赛

    2023-12-28 17:58:02       6 阅读
  3. Docker安装并配置阿里的Sentinel控制台

    2023-12-28 17:58:02       41 阅读
  4. 阿里商家爬虫工具 1688采集软件使用教程

    2023-12-28 17:58:02       20 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-28 17:58:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-28 17:58:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-28 17:58:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-28 17:58:02       18 阅读

热门阅读

  1. 2024 Python开发者转型Go开发

    2023-12-28 17:58:02       29 阅读
  2. linux使用内核编译其中一个模块

    2023-12-28 17:58:02       33 阅读
  3. 国产银河麒麟服务器开放防火墙命令

    2023-12-28 17:58:02       32 阅读
  4. Android 电话拨打界面按back键不结束通话活动

    2023-12-28 17:58:02       31 阅读
  5. 少年chen-zhe (关于洛谷)

    2023-12-28 17:58:02       37 阅读
  6. 安卓逆向笔记之AndroidManifest.xml篇

    2023-12-28 17:58:02       35 阅读
  7. shell脚本调试技巧

    2023-12-28 17:58:02       36 阅读
  8. 群晖Nas Docker镜像自动部署

    2023-12-28 17:58:02       35 阅读
  9. django调用矩阵分解推荐算法模型做推荐系统

    2023-12-28 17:58:02       35 阅读
  10. 计算机专业校招常见面试题目总结

    2023-12-28 17:58:02       39 阅读