文章 58
评论 26
浏览 119009
flutter使用iconfont.cn上的图标

flutter使用iconfont.cn上的图标

自定义Icon图标教程,记录一下。

1、iconfont.cn网站处理一下:

下载文件:

image.png

两个文件需要试用一下, 一是ttf文件,在第2步中直接引入即可。另外一个css文件转化成dart文件,用一个网站转就可以了 https://xwrite.gitee.io/blog/

image.png

2、Flutter项目引入一下。

首先pubspec.yaml也要引入一些依赖。

fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

引入ttf文件:

image.png

3、使用一下:

image.png

使用如下:

BottomNavigationBarItem(
              icon: Icon(IconFont.icon_home),
              label: "主页",
            ),

4、还有一种转换方法,如链接所示

哈哈哈哈哈哈哈嗝~

取消