Flutter 使用阿里巴巴icon库
在Flutter默认创建的项目中可以使用系统Material图标,在pubspec.yaml
文件中使用图标设置如下:
flutter:
uses-material-design: true
系统图标如下:
如果这里面没有我们想要的图标如何处理呢?这时可以使用第三方图标库,下面以阿里巴巴的图标库为例。
查找图标并加入购物车
找到自己想要的图标后,将鼠标放置到图标上,加入购物车,如下图:
点击右上角的购物车,然后点击添加至项目,如下图:
如果没有添加过项目,需要创建一个新项目,如下图:
创建好后加入此项目,跳转到我的项目
页面,点击下载,如下图:
解压下载的文件,解压出来的文件有好几个,如下图:
选择iconfont.ttf
文件拷贝到Flutter项目的assets/fonts
目录下,assets/fonts
目录默认是没有的,需要手动创建,在pubspec.yaml
设置如下:
千万注意红框内开头的空格问题,否则编译不通过,family
后面跟的字符串最好有意义,后面用图标的时候需要用到。
用法如下:
Icon(IconData(0xe613,fontFamily: 'appIconFonts')
0xe613
在下载图标时已经标注,将&#
替换为0
,如下图:
fontFamily
是在pubspec.yaml
中设置的family
属性,第三方的图标和系统图标一样,可以设置其颜色和大小。
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
推荐一个Flutter学习地址:http://laomengit.com 里面包含150多个组件的详细用法。
Flutter 使用阿里巴巴icon库的更多相关文章
- IconFont --阿里巴巴矢量库
超多的图标网站,可自己设置颜色,然后下载. IconFont --阿里巴巴矢量库
- 阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔 阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
- Flutter 一些常用第三方库、插件
网络请求 http ^0.12.0+2 https://pub.dev/packages/http https://github.com/dart-lang/http 该软件包包含一组高级函数和类,可 ...
- Flutter如何引用第三方库并使用
Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教 ...
- flutter 引入第三方 Icon 图标(以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- Flutter内置ICON
由于有时打不开flutter的icon官网 https://material.io/tools/icons/?style=baseline 截图存下icon 如果看不清 Ctrl + 恢复Ctr ...
- font_awesome的icon库的使用
1.使用cdn引入font_awesome图标库的css文件 例如:index.htm <html><head><title>font_awesome test&l ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
随机推荐
- 【深圳·招聘】QQ音乐测试工程师-职位内推
QQ音乐测试工程师 岗位职责 负责腾讯QQ音乐移动端/后台/web相关特性测试分析和执行,保障发布质量. 岗位要求 专业本科及以上学历,计算机/软件工程/信息管理/数学与应用数学/自动化/通信工程/电 ...
- nginx部署静态文件站点
server { listen PORT; #PORT为监听端口 server_name SERVER_NAME; #SERVER_NAME为域名 charset utf-8; autoindex o ...
- 安卓权威编程指南-笔记(第23章 HTTP与后台任务)
1. 网络连接基本 //通过指定URL获取原始数据,并返回一个字节流数组. public byte[] getUrlBytes(String urlSpec)throws IOException{ / ...
- FBI今年最重要的任务:招募黑客
当FBI(联邦调查局)一次又一次被爆出丑闻的时候,面临着一个又一个的尴尬局面.在这样的情况下,FBI发现了自己的一个巨大问题,那就是以前都依靠隐秘行动和人员的保密性来保证国家的安全,现在必须依靠更 ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- 曹工说Spring Boot源码(21)-- 为了让大家理解Spring Aop利器ProxyFactory,我已经拼了
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- 聊聊RabbitMQ那一些事儿之一基础应用
聊聊RabbitMQ那一些事儿之一基础应用 Hi,各位热爱技术的小伙伴您们好,今年的疫情害人啊,真心祝愿您和您的家人大家都平平安安,健健康康.年前到现在一直没有总结点东西,写点东西,不然久了自己感觉自 ...
- 自己动手用java写一个hashMap
入坑java很多年了,现在总结一下自己学到的东西. 1.首先我们先来聊聊什么是HashMap? 什么是hash?hash用中文的说法就叫做“散列”,通俗的讲就是把任意长度的字符串输入,经过hash计算 ...
- Python安装3 —— Python3.8和2.7共存
本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12400896.html 一:Python解释器为什么要2个版本? 众所周知,Py ...
- JavaScript 工作原理之十三-CSS 和 JS 动画底层原理及如何优化其性能
原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...