Flutter中添加Iconfont矢量图

最新推荐文章于 2025-11-06 03:49:45 发布
原创 最新推荐文章于 2025-11-06 03:49:45 发布 · 8.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何在Flutter项目中集成并使用iconfont图标，包括图标下载、字体文件导入、配置pubspec.yaml以及引用图标的具体步骤。

flutter中使用https://www.iconfont.cn/中的图标

1.新建项目，添加一些图标到项目中

 然后点击下载到本地，找到 iconfont.ttf文件

 2.打开flutter项目，将字体导入到文件夹中，没有文件夹的自己建

3.找到pubspec.yaml文件，添加引用路径

这里需要注意右边第一个fonts左边的空格，如果不对会引用不到，很坑爹，family是自定义的名字

 

用IconData引用该字体图片

 把图一中的&#换成0就是IconData的codePoint

这里Constants.IconFontFamily 等价于pubspec.yaml中的appIconFonts,是一个字符串 ，可替换成'appIconFonts'

4.运行项目展示

【Flutter 问题系列第 54 篇】Flutter 引入阿里矢量图标库的详细图文教程
“Allen Su”的博客
01-07 1704
Flutter 引入阿里矢量图标库的详细图文教程
【Flutter】四、Flutter之Icon
MAXLZ的博客
08-23 1762
【Flutter】Flutter之Icon一、Icon构造器二、Icon属性说明三、使用IconFont四、示例代码 APP中难免要使用Icon图标，本文将介绍如何在Flutter中使用Iconfont及自带Icon的使用。 Flutter中自带的Icon可以去这里看：https://material.io/tools/icons/ 使用Icon可以创建我们所需要的图标。 一、Icon构造器 ...
chrome charset使用_在Flutter中使用iconfont...附一键生成Dart类的技巧
weixin_39998906的博客
11-30 238
Flutter = 胡辣汤前言 对于前端工程师来说，在项目中使用iconfont太习以为常了。而在Flutter中，内置了Icon组件，所有图标都来自MaterialDesign Icons，数量众多，完全是够用的。可我们在实际开发中还是会要使用到自定义图标，那如何在Flutter项目中使用自定义的IconFont，这就是本文要教给大家的。声明自定义字体前往 https://www.iconfon...
Flutter IconFont 使用
杰森丶郭达斯坦森的博客
10-10 888
Flutter IconFont 使用
Flutter-Notebook自定义字体：引入与使用外部字体
最新发布
gitblog_00797的博客
11-06 631
在Flutter应用开发中，字体样式直接影响用户体验和界面美观度。Flutter-Notebook项目提供了灵活的字体管理方案，帮助开发者轻松集成各类外部字体资源。本文将通过三个步骤，详解如何在项目中引入并应用自定义字体，解决中文字体显示异常、字体样式单一等常见问题。 ## 一、字体文件准备与目录规划 自定义字体集成的首要步骤是准备字体文件并建立规范的资源目录。Flutter支持TrueTyp
Flutter使用阿里矢量图库管理项目svg图片
qq_36237165的博客
09-26 1292
为什么使用阿里svg图片 方便管理项目图标和协调开发，svg图标占用内存小 使用： 1登录阿里矢量图标库 iconfont-阿里巴巴矢量图标库 创建项目 上传项目需要的svg图标 2安装脚手架，(作用：通过命令自动生成需要的图标资源代码，) 下载 | Node.js (nodejs.org) 安装后执行下面命令 1安装 flutter-iconfont-cli命令 npm install flutter-iconfont-cli -g 2生成 iconfont 配置文件命...
在 Flutter 中使用 iconfont
codergzh
10-15 868
在Flutter开发中，使用字体图标必不可少，虽然Flutter也给我们提供了很多内置icon，但是在实际开发中还是会使用到自定义图标。
flutter显示图标_Flutter使用Iconfont图标
weixin_31128065的博客
01-17 1122
Iconfont阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。添加到Flutter项目中手动添加到Flutter项目中下载 iconfont.ttf 文件到项目 fonts(可修改) 目录中修改 pubspec.yaml 文件，配置字体文件flutter:font...
荧光粉：Flutter的灵活图标系列
02-04
1. 添加依赖：在`pubspec.yaml`文件中添加`phosphor_flutter`依赖项，并运行`flutter pub get`命令来安装。 2. 引入库：在需要使用图标的dart文件中导入`package:phosphor_flutter/icons.dart`。 3. 使用图标：通过`...
Flutter（1）：常用组件
羽墨灵丘的博客
08-17 2893
flutter 常用组件整理
使用flutter_svg构建出色的矢量图形体验
gitblog_00062的博客
05-13 783
使用flutter_svg构建出色的矢量图形体验 flutter_svgSVG parsing, rendering, and widget library for Flutter项目地址:https://gitcode.com/gh_mirrors/fl/flutter_svg 在寻找一种高效且灵活的方式来在Flutter应用中呈现SVG图像吗？让我们一起探索一个强大的开源项目——flutte...
flutter_flutter_logo_animation
04-02
flutter_flutter_logo_animation 一个新的Flutter应用程序。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
flutter学习之在Flutter中使用iconfont
qq_34867424的博客
02-22 1374
在./lib/ 下新建fonts.dart,编写自定义图标类，如下所示。将iconfont 代码放在fonts 文件夹下，没有的话，需要新建。在pubspec.yaml 配置字体库信息。在iconfont 中下载图片代码。
flutter引入阿里矢量图标库
m0_47265814的博客
11-11 832
纪念我第一次引入阿里矢量图标库 之前看了好多教程，觉得很麻烦就一直没有动手手，之前用vue，每次加图标就要去配置里面改东西，还是很麻烦的，flutter会更简单吗？不可能，连加个图片都要配置的框架你以为加icon不需要吗？ 1. 下载到本地之后将下载的文件夹打开 将.ttf文件放入新建的icons文件，这是我的文件路径 找到你的配置文件的文件，就是配置图片文件的文件，与图片配置同一级别 fonts与assets同级别 fonts: - family: MyIcons f
如何在 Flutter 中使用 IconFont ?
weixin_34362875的博客
06-09 417
我的个人博客同步更新，阅读体验会好一点，欢迎访问。 简书：https://www.jianshu.com/u/762002465748 掘金：https://juejin.im/user/5a3127da5188251c11409f0a 个人博客：https://wuht.coding.me/ 废话 距离上一次更新博客已经半年了，实在是有点忙，期间还换了了个工作，很多的事情，但是非常感谢有的网...
Flutter自定义iconfont字体图标
WEB前端李志杰
03-30 4115
带大家一步一步实现在Flutter项目中添加自定义字体图标，并实现简单封装。
flutter 之自定义 icon
艾米的猫儿的博客
01-31 966
flutter 之自定义 icon 使用全过程
Flutter-自定义图标-iconfont 阿里巴巴
m0_48259951的博客
03-08 2055
虽然Flutter有许多内置的icon图标，但是有些特殊功能的话，需要自定义图标或者需要在。后，会生成一些不同格式的字体文件，在Flutter中，我们使用。文件其实是用不到的，只是为了能更便捷的看到每个字体对应的。定义多个字体文件，步骤都是一样的，只不过是把解压文件里的。：下载下来解压后的文件，在项目的根目录下新建一个。目录下新建一个自定义字体文件，我这里的命名是。文件，与已引入的字体文件名做区分，在。配置，引入自定义文件，这里首个。，也可配置多个字体，替换不同。文件夹，把解压文件里的。
探索无限可能：Flutter Maplibre GL —— 您的可定制矢量地图解决方案
gitblog_00029的博客
06-04 769
探索无限可能：Flutter Maplibre GL —— 您的可定制矢量地图解决方案 flutter-maplibre-gl A flutter package for showing customizable vector/raster maps with MapLibre (forked from tobrun/f...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值