flutter項目引入iconfont阿里巴巴圖標
下載圖標
這里直接去iconfont阿里巴巴矢量圖標庫,選好自己需要的圖標,點擊如下圖所示【添加到庫】
然后選擇頭像左側的購物車圖標
然后點擊下載代碼
引入圖標 解壓完打開文件夾可以看到如下文件列表,我們將.ttf文件放在項目的靜態(tài)資源文件夾中【我直接放在asset文件夾下】
接著我們在項目的pubspec.yaml文件夾下引入字體文件,并設置字體族名稱
fonts: - family: Iconfont fonts: - asset: asset/fonts/iconfont.ttf
然后我們打開剛剛下載文件夾中的demo_index.html,在這里可以看到圖標的unicode,如果圖標添加在了項目里也能直接在項目中看到,如下
在iconfont網(wǎng)站我的對應項目中查看對應編碼,注意我們只需要用“#”后面的編碼
查看項目是點擊 資源管理->我的項目
然后我們創(chuàng)建一個my_icons的工具類,【模仿material中自帶的icons】用于放置我們自定義的字體圖標
import 'package:flutter/material.dart'; /// @author longzipeng /// @創(chuàng)建時間:2022/2/26 /// 自定義字體圖標 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如下:
使用圖標
這里我們直接修改系統(tǒng)默認工程中點擊器的圖標
Icon(MyIcons.box)
注意
如果沒有顯示圖標注意重啟工程或者檢查一下自己配置的圖標文件路徑是否正確
以上就是flutter項目引入iconfont阿里巴巴圖標的詳細內容,更多關于flutter引入iconfont圖標的資料請關注腳本之家其它相關文章!
相關文章
Android實現(xiàn)與Apache Tomcat服務器數(shù)據(jù)交互(MySql數(shù)據(jù)庫)
本篇文章主要介紹了Android實現(xiàn)與Apache Tomcat服務器數(shù)據(jù)交互(MySql數(shù)據(jù)庫),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06如何設置Android studio 3.0顯示光標返回上一次瀏覽位置的箭頭圖標
這篇文章主要介紹了如何設置Android studio 3.0顯示光標返回上一次瀏覽位置的箭頭圖標 很多朋友反映剛升級了Android studio 3.0,發(fā)現(xiàn)光標返回上一次瀏覽位置的箭頭圖標沒有了,下文給大家介紹的非常詳細,需要的朋友可以參考下2017-11-11androidx下的fragment的lazy懶加載問題詳解
這篇文章主要介紹了androidx下的fragment的lazy懶加載問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04Android數(shù)據(jù)共享 sharedPreferences 的使用方法
這篇文章主要介紹了Android數(shù)據(jù)共享 sharedPreferences 的使用方法的相關資料,希望通過本文能幫助到大家,讓大家理解使用sharedpreferences,需要的朋友可以參考下2017-10-10