flutter 使用阿里图标

柔光的暖阳◎ 2023-02-18 08:26 7阅读 0赞

**1. 下载图标** [阿里图标][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]  
**2. 解压 将`iconfont.ttf`放入lib\\assets\\icons内**  
解压下载的`阿里图标`文件 我们只需要里面的`iconfont.ttf`文件  
将`iconfont.ttf`文件放入lib\\assets\\icons内  
![在这里插入图片描述][20200616202705130.png]  
**3. 配置pubspec.yaml文件**

# example: 下面引入的是阿里云图标 alIcons是iconfont.ttf图标家族的自定义名称
      fonts:
        - family: alIcons
          fonts:
            - asset: lib/assets/icons/iconfont.ttf

## 4 .页面上使用 ##

**使用方法一（Text使用法）** `\u` \+ `阿里图标后4位`  
![在这里插入图片描述][20200616203203372.png]

Text("\ue8d1", style: TextStyle(fontFamily: 'alIcons', color: Colors.white)),

**使用方法二（Icon使用法）** `0x` \+ `阿里图标后4位`  
![在这里插入图片描述][202006162035444.png]

Icon(IconData(0xe8b9, fontFamily: 'alIcons'), color: Colors.grey)

[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616202300252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70
[20200616202705130.png]: https://img-blog.csdnimg.cn/20200616202705130.png
[20200616203203372.png]: https://img-blog.csdnimg.cn/20200616203203372.png
[202006162035444.png]: https://img-blog.csdnimg.cn/202006162035444.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 flutter 引入第三方 Icon 图标（以阿里图标库为例)

在fluttter中引入第三方图标库的具体方法： 1.在阿里图标库选好需要用的图标，添加进购物车将选好的图标打包下载到本地（下载代码），复制iconfont.ttf文件到项目

╰+攻爆jí腚メ/ 2023年08月17日 15:59/ 0 赞/ 142 阅读

相关 flutter 使用阿里图标

1. 下载图标 [阿里图标][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

柔光的暖阳◎/ 2023年02月18日 08:26/ 0 赞/ 8 阅读

相关 vue中使用阿里图标

1.到阿里图标库下载你的字体图标 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

柔情只为你懂/ 2023年02月10日 12:28/ 0 赞/ 8 阅读

相关 nvue使用阿里图标

1、template <template> <view> <text class="iconfont"></text> <

╰+哭是因爲堅強的太久メ/ 2023年01月20日 09:58/ 0 赞/ 45 阅读

相关阿里图标库使用（在线使用）

1.首先你需要准备一个github或者新浪微博账号用来登录（拥有阿里员工账号也可）地址：https://www.iconfont.cn/ 2.选择图标库，在搜索框选择

Myth丶恋晨/ 2022年12月14日 06:23/ 0 赞/ 318 阅读

相关 uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标

一.图标下载 1. 话不多说上网址 [https://www.iconfont.cn/][https_www.iconfont.cn] 2.先选择图标加入购物车，记得先

缺乏、安全感/ 2022年11月29日 13:13/ 0 赞/ 273 阅读

相关使用flutter_launcher_icons自动生成Flutter应用程序图标

I’ve been working on a Flutter application for the better half of this year, and as we g

比眉伴天荒/ 2022年11月27日 04:27/ 0 赞/ 357 阅读

相关阿里图标库的基本使用

一、进入阿里图标库官网站：[http://www.iconfont.cn][http_www.iconfont.cn] 二、选择想要的图标加入购物车(如果不想以unicode

末蓝、/ 2022年05月15日 12:52/ 0 赞/ 545 阅读

相关阿里图标库的使用

网址：[https://www.iconfont.cn/plus/home/index][https_www.iconfont.cn_plus_home_index] 1.

矫情吗；*/ 2022年01月28日 07:19/ 0 赞/ 334 阅读

相关阿里字体小图标的使用

在项目开发中，我们难免会用到一些图片之类的样式，但是图片本身体积大，而且更改样式和其他标签融合布局相对麻烦，那么有没有更好的办法呢？字体小图标解决了我们这个问题。

比眉伴天荒/ 2021年09月18日 14:54/ 0 赞/ 596 阅读