1. 打开Iconnfont,选择自己想要的图标添加到购物车!

2,在右上角点开购物车选择下载代码。

3. 解压下载的代码压缩包,我们可以看到一个iconfont.ttf

4. 在项目根目录下创建一个fonts,并且把这个图标字体文件放入

5. 在pubspec.yaml中添加fonts配置如下:

6.在项目中创建一个iconfont.dart类,来配置下载到的图标

点开刚才下载图标压缩包里面的demo_index.html文件。如下

IconData的第一个参数就是每个图标下面的代码。

Ps:可以使用这个工具 iconfont.css 快速生成 iconfont.dart

我是工具点我点我

我的做法一般是在iconfont创建一个自己的项目,将所有想要的图标添加到自己的项目中,然后一起下载,因为我们需要的图标并不是只下载一次。

如果下载第二次还得将第一次的ttf文件中的图标找到,重新添加到购物车,然后和新图标一起下载,不然覆盖掉之前的ttf文件,你会瞬间爆炸。

在自己的项目中可以添加图标,反复下载,旧图标不会丢失。

如下:

flutter 使用阿里iconfont图标库的更多相关文章

  1. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  2. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  3. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  4. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

  5. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  6. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  7. Day7-微信小程序实战-引入iconfont(充分利用iconfont图标库的资源)

    一.引入iconfont 首先在iconfont.com中注册登陆: 点击上方[图标管理]并进入我的项目 注意:如果没有项目的话,就点击右边的来创建项目 在官网中找到想要的图标之后,以SVG的形式下载 ...

  8. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  9. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  10. Css3图标库

    最近在研究icon font图标字库,觉得很有意思,于是找了一些比较好的在线字库.大都是开源的,而且各有特色,推荐给大家! 阿里icon font字库 http://www.iconfont.cn/ ...

随机推荐

  1. 华为R&W典型园区网络设计

    PS:本人正在学习HCIP中,想到一个典型的园区网络就自己用ENSP搭建了一个典型拓扑分享给大家一起学习 拓扑图如下: 要求已经写在拓扑结构下下方文本框中请自行查看! 配置如下(没有专门的命令插入我就 ...

  2. firefox 利用 Selenium IDE 对 DBackup 进行自动化测试

    今天看<编写可维护的JavaScript>的时候有一章是专门讲 Selenium 对 JavaScript 进行自动化测试的. 在了解了 Selenium 的强大之后,动手试验了一下 fi ...

  3. 如何在网页打开CAD,DWG文件,(在线CAD)在线CAD平台,H5前端显示CAD,网页CAD

    简介 提示:目前提供两种在网页中浏览编辑CAD图纸方案,详细说明见:https://help.mxdraw.com/?pid=46 提示:MxDraw云图在线API教程:https://demo.mx ...

  4. C++ primer 5th 第一章 开始 阅读笔记

    第一章 开始 第一节 编写一个简单的C++程序 不同编译器使用不同的后缀命名约定,比如cc.cpp.c. 比如main程序保存到prog1.cc中,可以使用如下命令来编译它:cc prog1.cc.其 ...

  5. 标量子查询加聚合函数sql改写一

    标量子查询的语句: select /*+ GATHER_PLAN_STATISTICS dwtest */ empno, (select count(*) from DEPT1 b where b.i ...

  6. 线上服务Java进程假死快速排查、分析

    引用 https://zhuanlan.zhihu.com/p/529350757 最近我们有一台服务器上的Java进程总是在运行个两三天后就无法响应请求了,具体现象如下: 请求业务返回状态码502, ...

  7. Jenkins自动化部署(linux环境)---代码提交触发Jenkins构建

    1.在工程中点击构建触发器中选择Generic Webhook Trigger,填写token 2.gitee配置Webhook 选择gitee项目中的Settings->Webhooks> ...

  8. 玩玩 Visual Studio Code 和 MSYS2

    注意:为了便于理解本文内容,您可能需要一些前置知识,例如命令行操作,编译器操作,路径操作,环境变量操作,vscode操作-- 众所周知 Visual Studio Code 是一个优秀的编辑器. 众所 ...

  9. Accelerated molecular dynamics simulation of Silicon Crystals on TaihuLight using OpenACC 阅读

    基于OpenACC的太湖之光硅晶体加速分子动力学模拟    2020 摘要:以SW26010异构多核处理器和扩展的编程模型,使用多体势(Tersoff)执行固体共价晶体的分子动力学(MD)模拟. Am ...

  10. 时间处理及interval函数运用

    MySql时间操作1.interval的说明1.1.当函数使用时,即interval(),为比较函数,如:interval(10,1,3,5,7); 结果4:原理:10为被比较数,后面1,3,5,7为 ...