flutter項(xiàng)目引入iconfont阿里巴巴圖標(biāo)
下載圖標(biāo)
這里直接去iconfont阿里巴巴矢量圖標(biāo)庫，選好自己需要的圖標(biāo)，點(diǎn)擊如下圖所示【添加到庫】
然后選擇頭像左側(cè)的購物車圖標(biāo)
然后點(diǎn)擊下載代碼
引入圖標(biāo) 解壓完打開文件夾可以看到如下文件列表，我們將.ttf文件放在項(xiàng)目的靜態(tài)資源文件夾中【我直接放在asset文件夾下】
接著我們在項(xiàng)目的pubspec.yaml文件夾下引入字體文件，并設(shè)置字體族名稱
fonts:
- family: Iconfont
fonts:
- asset: asset/fonts/iconfont.ttf
然后我們打開剛剛下載文件夾中的demo_index.html，在這里可以看到圖標(biāo)的unicode，如果圖標(biāo)添加在了項(xiàng)目里也能直接在項(xiàng)目中看到，如下
在iconfont網(wǎng)站我的對應(yīng)項(xiàng)目中查看對應(yīng)編碼，注意我們只需要用“#”后面的編碼
查看項(xiàng)目是點(diǎn)擊 資源管理->我的項(xiàng)目
然后我們創(chuàng)建一個(gè)my_icons的工具類，【模仿material中自帶的icons】用于放置我們自定義的字體圖標(biāo)
import 'package:flutter/material.dart';
/// @author longzipeng
/// @創(chuàng)建時(shí)間：2022/2/26
/// 自定義字體圖標(biāo)
class MyIcons{
static const String fontFamily = "Iconfont";
static const IconData box = IconData(0xe63a, fontFamily: fontFamily);
static const IconData net = IconData(0xec5d, fontFamily: fontFamily);
}
系統(tǒng)自帶的icons如下：
使用圖標(biāo)
這里我們直接修改系統(tǒng)默認(rèn)工程中點(diǎn)擊器的圖標(biāo)
Icon(MyIcons.box)
注意
如果沒有顯示圖標(biāo)注意重啟工程或者檢查一下自己配置的圖標(biāo)文件路徑是否正確
以上就是flutter項(xiàng)目引入iconfont阿里巴巴圖標(biāo)的詳細(xì)內(nèi)容，更多關(guān)于flutter引入iconfont圖標(biāo)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在Android系統(tǒng)中使用gzip進(jìn)行數(shù)據(jù)傳遞實(shí)例代碼
HTTP協(xié)議上的GZIP編碼是一種用來改進(jìn)WEB應(yīng)用程序性能的技術(shù)，4.4MB的文本數(shù)據(jù)經(jīng)過Gzip傳輸?shù)娇蛻舳酥笞優(yōu)?92KB，壓縮效率極高，下面與大家分享下具體的實(shí)現(xiàn)2013-06-06
這篇文章主要介紹了Android中Blade的使用實(shí)例詳解,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了總是聽到有人說AndroidX，到底什么是AndroidX,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Android實(shí)現(xiàn)濾鏡效果ColorMatrix
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)濾鏡效果ColorMatrix，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Android中的指紋識別demo開發(fā)實(shí)例
這篇文章主要介紹了Android中的指紋識別demo開發(fā)實(shí)例的相關(guān)知識，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
JSON解析和XML解析是較為普遍的兩種解析方式，其中JSON解析的市場分額更大。這篇文章主要介紹了JSON解析和XML解析區(qū)別對比,需要的朋友可以參考下2016-10-10
Android實(shí)現(xiàn)屏幕各尺寸的獲取的示例
本篇文章主要介紹了Android實(shí)現(xiàn)屏幕各尺寸的獲取的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Android SlidingDrawer 抽屜效果的實(shí)現(xiàn)
本篇文章小編為大家介紹，Android SlidingDrawer 抽屜效果的實(shí)現(xiàn)。需要的朋友參考下2013-04-04
Android實(shí)現(xiàn)在TextView文字過長時(shí)省略部分或滾動顯示的方法
這篇文章主要介紹了Android實(shí)現(xiàn)在TextView文字過長時(shí)省略部分或滾動顯示的方法,結(jié)合實(shí)例形式分析了Android中TextView控件文字顯示及滾動效果相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
根據(jù)USER-AGENT判斷手機(jī)類型并跳轉(zhuǎn)到相應(yīng)的app下載頁面
檢測瀏覽器的USER-AGENT,然后根據(jù)正則表達(dá)式來確定客戶端類型，并跳轉(zhuǎn)到相應(yīng)的app下載頁面，這個(gè)方法還是比較實(shí)用的，大家可以看看2014-09-09