HarmonyOS 鸿蒙Next 可以提供一个iconfont使用demo吗

当前支持使用iconfont，使用方式是通过Text组件来承载，需要将iconfont.ttf文件下载到本地使用，同时注意unicode编码要获取正确官网文档即：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

使用参考如下：

// entryability.ets

windowStage.loadContent('pages/Index', (err, data) => {

  if (err.code) {

    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');

    return;

  }

  let windowClass: window.Window;

  windowStage.getMainWindow((err, data) => {

    windowClass = data;

    // 全局注册字体文件，iconfont.ttf保存在rawfile目录下

    windowClass.getUIContext().getFont().registerFont({

      familyName: 'iconfont',

      familySrc: $rawfile('iconfont.ttf')

    })

  })

});

// page.ets

build() {

  Row() {

    Column() {

      // 使用Text组件加载字体图标，鸿蒙上\u标识unicode编码，如原图标在html上的编码为&#xe67e，在鸿蒙上的写法即为\ue67e

      Text("\ue67e")

        .fontSize(50)

        .fontFamily("iconfont")

    }

    .width('100%')

  }

  .height('100%')

}

不局限text组件，如Button、TextInput等都可以使用自定义字体。

更多关于HarmonyOS 鸿蒙Next 可以提供一个iconfont使用demo吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•2 个月前

你可以直接从iconfont下载到本地就可以使用了呀，或者使用鸿蒙内置的icon：https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

phonegap100 3楼•2 个月前

在HarmonyOS 鸿蒙Next中，使用iconfont的demo可以通过以下步骤实现。首先，你需要确保你的项目中已经包含了必要的依赖和配置。

引入iconfont资源：
- 下载或获取iconfont的字体文件（通常为.ttf或.otf格式）。
- 将字体文件放置在项目的assets/fonts目录下。
配置字体：
- 在config.json中添加字体配置，指定字体文件路径和别名。
在代码中引用：
- 在你的布局文件（如XML布局）中，通过fontFamily属性引用配置好的字体别名。
- 对于动态文本，可以使用Text组件的setFontFamily方法设置字体。
使用iconfont字符：
- 在你的布局或代码中，将iconfont的字符（通常是Unicode字符）设置为Text组件的文本内容。
- 确保这些字符与你在iconfont网站选择的图标一致。

示例代码（XML布局）：

<Text
    ohos:id="$+id:text_icon"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="\uf123"  <!-- 假设\uf123是iconfont中的一个图标 -->
    ohos:font_family="iconfont" />

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html