首页 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也要引入一些依赖。

1
2
3
4
fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

引入ttf文件:

image.png

3、使用一下:

image.png

使用如下:

1
2
3
4
BottomNavigationBarItem(
  icon: Icon(IconFont.icon_home),
  label: "主页",
),

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

本文由作者按照 CC BY 4.0 进行授权