flutter项目引入iconfont阿里巴巴图标

更新时间：2022年05月16日 16:28:55 作者：编程小龙

这篇文章主要为大家介绍了flutter项目引入iconfont阿里巴巴图标的过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

下载图标

这里直接去iconfont阿里巴巴矢量图标库，选好自己需要的图标，点击如下图所示【添加到库】

然后选择头像左侧的购物车图标

然后点击下载代码

引入图标解压完打开文件夹可以看到如下文件列表，我们将.ttf文件放在项目的静态资源文件夹中【我直接放在asset文件夹下】

接着我们在项目的pubspec.yaml文件夹下引入字体文件，并设置字体族名称

  fonts:
    - family: Iconfont
      fonts:
        - asset: asset/fonts/iconfont.ttf

然后我们打开刚刚下载文件夹中的demo_index.html，在这里可以看到图标的unicode，如果图标添加在了项目里也能直接在项目中看到，如下

在iconfont网站我的对应项目中查看对应编码，注意我们只需要用“#”后面的编码

查看项目是点击资源管理->我的项目

然后我们创建一个my_icons的工具类，【模仿material中自带的icons】用于放置我们自定义的字体图标

import 'package:flutter/material.dart';
/// @author longzipeng
/// @创建时间：2022/2/26
/// 自定义字体图标
class MyIcons{
  static const String fontFamily = "Iconfont";
  static const IconData box = IconData(0xe63a, fontFamily: fontFamily);
  static const IconData net = IconData(0xec5d, fontFamily: fontFamily);
}

系统自带的icons如下：

使用图标

这里我们直接修改系统默认工程中点击器的图标

Icon(MyIcons.box)

注意

如果没有显示图标注意重启工程或者检查一下自己配置的图标文件路径是否正确

以上就是flutter项目引入iconfont阿里巴巴图标的详细内容，更多关于flutter引入iconfont图标的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android实现与Apache Tomcat服务器数据交互(MySql数据库)
本篇文章主要介绍了Android实现与Apache Tomcat服务器数据交互(MySql数据库)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标
这篇文章主要介绍了如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标很多朋友反映刚升级了Android studio 3.0，发现光标返回上一次浏览位置的箭头图标没有了，下文给大家介绍的非常详细,需要的朋友可以参考下
2017-11-11
Android 中WallpaperManager用法实例
这篇文章主要介绍了Android 中WallpaperManager用法实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
2017-09-09
Android 屏蔽和捕获Home键的示例代码
本文主要介绍 Android 屏蔽和捕获Home 键的方法,并附有代码实例参考,在开发过程中可能会遇到这样的功能,有需要的同学可以参考下
2016-07-07
Android自定义控件实现时钟效果
这篇文章主要介绍了Android自定义控件实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Android消息处理机制Looper和Handler详解
Android应用程序是通过消息来驱动的，系统为每一个应用程序维护一个消息队例，应用程序的主线程不断地从这个消息队例中获取消息（Looper），然后对这些消息进行处理（Handler），这样就实现了通过消息来驱动应用程序的执行，本文将详细分析Android应用程序的消息处理机制
2014-09-09
androidx下的fragment的lazy懒加载问题详解
这篇文章主要介绍了androidx下的fragment的lazy懒加载问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Android数据共享 sharedPreferences 的使用方法
这篇文章主要介绍了Android数据共享 sharedPreferences 的使用方法的相关资料,希望通过本文能帮助到大家，让大家理解使用sharedpreferences，需要的朋友可以参考下
2017-10-10
Android 图片存储到指定路径和相册的方法
本篇文章主要介绍了Android 图片存储到指定路径和相册的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Android实现计步器功能
这篇文章主要为大家详细介绍了Android实现计步器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03