flutter項(xiàng)目引入iconfont阿里巴巴圖標(biāo)
下載圖標(biāo)
這里直接去iconfont阿里巴巴矢量圖標(biāo)庫(kù)，選好自己需要的圖標(biāo)，點(diǎn)擊如下圖所示【添加到庫(kù)】
然后選擇頭像左側(cè)的購(gòu)物車圖標(biāo)
然后點(diǎn)擊下載代碼
引入圖標(biāo) 解壓完打開文件夾可以看到如下文件列表，我們將.ttf文件放在項(xiàng)目的靜態(tài)資源文件夾中【我直接放在asset文件夾下】
接著我們?cè)陧?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)站我的對(duì)應(yīng)項(xiàng)目中查看對(duì)應(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)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android實(shí)現(xiàn)與Apache Tomcat服務(wù)器數(shù)據(jù)交互(MySql數(shù)據(jù)庫(kù))
本篇文章主要介紹了Android實(shí)現(xiàn)與Apache Tomcat服務(wù)器數(shù)據(jù)交互(MySql數(shù)據(jù)庫(kù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
如何設(shè)置Android studio 3.0顯示光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo)
這篇文章主要介紹了如何設(shè)置Android studio 3.0顯示光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo) 很多朋友反映剛升級(jí)了Android studio 3.0，發(fā)現(xiàn)光標(biāo)返回上一次瀏覽位置的箭頭圖標(biāo)沒有了，下文給大家介紹的非常詳細(xì),需要的朋友可以參考下2017-11-11
Android 中WallpaperManager用法實(shí)例
這篇文章主要介紹了Android 中WallpaperManager用法實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
本文主要介紹 Android 屏蔽和捕獲Home 鍵的方法,并附有代碼實(shí)例參考,在開發(fā)過(guò)程中可能會(huì)遇到這樣的功能,有需要的同學(xué)可以參考下2016-07-07
Android自定義控件實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要介紹了Android自定義控件實(shí)現(xiàn)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Android消息處理機(jī)制Looper和Handler詳解
Android應(yīng)用程序是通過(guò)消息來(lái)驅(qū)動(dòng)的，系統(tǒng)為每一個(gè)應(yīng)用程序維護(hù)一個(gè)消息隊(duì)例，應(yīng)用程序的主線程不斷地從這個(gè)消息隊(duì)例中獲取消息（Looper），然后對(duì)這些消息進(jìn)行處理（Handler），這樣就實(shí)現(xiàn)了通過(guò)消息來(lái)驅(qū)動(dòng)應(yīng)用程序的執(zhí)行，本文將詳細(xì)分析Android應(yīng)用程序的消息處理機(jī)制2014-09-09
androidx下的fragment的lazy懶加載問(wèn)題詳解
這篇文章主要介紹了androidx下的fragment的lazy懶加載問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Android數(shù)據(jù)共享 sharedPreferences 的使用方法
這篇文章主要介紹了Android數(shù)據(jù)共享 sharedPreferences 的使用方法的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解使用sharedpreferences，需要的朋友可以參考下2017-10-10
Android 圖片存儲(chǔ)到指定路徑和相冊(cè)的方法
本篇文章主要介紹了Android 圖片存儲(chǔ)到指定路徑和相冊(cè)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03