flutter引入自定義圖標(以阿里圖標庫為例)


  1. 首先在阿里圖標庫選擇你所要使用的圖標並收藏,如下圖:

    mark

  2. 把你所想使用的圖標添加到購物車(鼠標移到你想使用的圖表上有購物車按鈕,如下圖,購物車圖標變紅就是已經添加了)

    mark

  3. 點擊頁面右上角的購物車按鈕,會彈出如下窗口,點擊下載代碼,如下圖:

    mark

  4. 下載后為以zip結尾的壓縮包,解壓得到如下圖文件,然后把iconfont.ttf文件放入flutter項目\lib\assets\icons\iconfont.ttf路徑mark

  5. 接着在pubspec.yaml文件里,添加

    fonts:
        - family: MyIcons
          fonts:
            - asset: lib/assets/icons/iconfont.ttf
    

    MyIcons為你稍后在代碼里使用的名稱,可隨意更改

    添加后如下圖:mark

  6. 在代碼里使用:

    IconData('0x6e58', fontFamily: 'MyIcons'),
    

    '0x6e58'為圖標的16進制編號,查詢對應的編號可以打開剛剛解壓出來的文件里的HTML文件,如下圖mark

    把&#替換為0,就可以開心使用了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM