iconfont字体图标的使用

  • 优势:可以任意缩放大小,不失真,可以修改颜色,只要是字体可以设置的属性,它同样都可以进行设置

iconfont字体图标使用步骤

  1. iconfont官网选图标,将他们加入项目,点击下载,如下动图所示:(不过好像非常糊,但是可以看个大概)请添加图片描述

  2. 下载之后是一个压缩包,将其解压后,在ets目录中重新建一个子目录fonts,之后将解压后的全部文件都复制到fonts中,如图:
    在这里插入图片描述

  3. 注册成自定义字体:我们可以在入口组件中的aboutToAppear生命周期函数中对其进行注册,这样只要一加载Index入口页面,就会进行注册,如下图:

 //一加载Index入口页面,就进行注册
  aboutToAppear(): void {
    //注册字体
    font.registerFont({
      familyName:'myfont',//这个名字可以随意取字符即可
      familySrc:'/fonts/iconfont.ttf'//注意这里一定是后缀为ttf的文件
    })
    //this.handleSort(0)
  }
  1. 最后就完成了所有的准备工作,万事俱备,只欠开用!如下测试:
  Text('\ue616')//注意:\u后面的字符不同会导致字体图标的不同
        .fontFamily('myfont')//必填,不然不会显示
        .fontSize(26)
        .fontColor(Color.Gray)
        .margin(20)

\u后应该填什么

在这里插入图片描述- 注意:\u后的字符为这个图标下面所对编码中’x’之后的编码,如这个加油卡要用的话格式如下:

Text('\ue63a')
.fontFamily('myfont')
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐