iconfont拥有拥有庞大的图标库,涵盖了各种主题和风格的图标,以下我将介绍如何在鸿蒙系统中使用iconfont图标库

- 1.在iconfont中添加项目后下载并解压文件后,需将文件夹导入到系统目录当中

!important

该文件夹必须放在与pages同级目录之下

- 2.导包
import font from '@ohos.font'

在代码最上层输入以上代码段

- 3.注册字体
aboutToAppear(): void {
  font.registerFont({
    familyName:'myfont',
    familySrc:'/fonts/iconfont.ttf'
  })
}

请写在Index之下,使得页面开始加载时,就能够对字体进行注册。

familyName可随意命名,familySrc请进入以ttf结尾的文件(./ ../会使得代码失效请勿使用)

Text('\uxxxx')
  .fontFamily('myfont')

注意:是反斜杠!\u是前缀的固定格式后四位通过iconfont提供的Unicode书写

例子如下:
import font from '@ohos.font'
@Entry
@Component
struct Index {
  aboutToAppear(): void {
    font.registerFont({
      familyName:'myfont',
      familySrc:'/fonts/iconfont.ttf'
    })
  }
  build() {
    Column(){
      Text('\uec7f')
        .fontFamily('myfont')
        .fontSize(50)
        .fontColor(Color.Red
        )
    }
  }
}

总结

通过这种方式进入图标,相当于将图片看做是字体,能够使用字体上能修改的样式对图标进行编辑,并且不会丢失图标的像素

Logo

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

更多推荐