flutter項目引入iconfont阿裡巴巴圖標

Posted on by

下載圖標

這裡直接去iconfont阿裡巴巴矢量圖標庫，選好自己需要的圖標，點擊如下圖所示【添加到庫】

然後選擇頭像左側的購物車圖標

然後點擊下載代碼

引入圖標 解壓完打開文件夾可以看到如下文件列表，我們將.ttf文件放在項目的靜態資源文件夾中【我直接放在asset文件夾下】

接著我們在項目的pubspec.yaml文件夾下引入字體文件，並設置字體族名稱

  fonts:
    - family: Iconfont
      fonts:
        - asset: asset/fonts/iconfont.ttf

然後我們打開剛剛下載文件夾中的demo_index.html，在這裡可以看到圖標的unicode，如果圖標添加在瞭項目裡也能直接在項目中看到，如下

在iconfont網站我的對應項目中查看對應編碼，註意我們隻需要用“#”後面的編碼

查看項目是點擊 資源管理->我的項目

然後我們創建一個my_icons的工具類，【模仿material中自帶的icons】用於放置我們自定義的字體圖標

import 'package:flutter/material.dart';
/// @author longzipeng
/// @創建時間：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);
}

系統自帶的icons如下：

使用圖標

這裡我們直接修改系統默認工程中點擊器的圖標

Icon(MyIcons.box)

註意

如果沒有顯示圖標註意重啟工程或者檢查一下自己配置的圖標文件路徑是否正確

以上就是flutter項目引入iconfont阿裡巴巴圖標的詳細內容，更多關於flutter引入iconfont圖標的資料請關註WalkonNet其它相關文章！

推薦閱讀：