flutter项目引入iconfont【阿里巴巴图标】的图标

下载图标

这里直接去iconfont阿里巴巴矢量图标库，选好自己需要的图标，点击如下图所示【添加到库】
然后选择头像左侧的购物车图标
然后点击下载代码

引入图标

解压完打开文件夹可以看到如下文件列表，我们将.ttf文件放在项目的静态资源文件夹中【我直接放在asset文件夹下】
接着我们在项目的pubspec.yaml文件夹下引入字体文件，并设置字体族名称

  fonts:- family: Iconfontfonts:- 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【阿里巴巴图标】的图标相关推荐

在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
u-view2.0 引入iconfont（阿里字体图标库）详细步骤！
uView已通过大量的实践中,收集了用户最有可能需要用到的图标,见Icon 图标,但我们也相信,它肯定无法覆盖所有的场景和需求. 用户也可以使用标签的方式,自行引入字体图标,为何要通过扩展的方式集成呢 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
如何引入iconfont中的单色图标和多色图标（超简单）
网址:iconfont-阿里巴巴矢量图标库超简单!再不会引入就过分了哈! 一.单色图标引入 1.选择需要的图标 2.创建新项目.添加至该项目.下载到本地 3.将压缩包解压到自己的代码文件夹中 4.在 ...
vue项目引入并使用svg格式图标文件
先创建一个vue项目参考代码如下 vue create svgtext 然后引入一个第三方依赖svg-sprite-loader 参考代码如下 npm i svg-sprite-loader@6. ...
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
vue项目中引入iconfont
背景对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

flutter项目引入iconfont【阿里巴巴图标】的图标

下载图标

引入图标

使用图标

注意

flutter项目引入iconfont【阿里巴巴图标】的图标相关推荐

最新文章

热门文章