uni-app uni-icon通过 fontFamily 自定义图标 文档用法错误

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app uni-icon通过 fontFamily 自定义图标 文档用法错误

开发环境 版本号 项目创建方式
Mac 15.0 HBuilderX
4.24
1.06.2409131
3.5.8

bug描述：

uni-icons文档通过 fontFamily 自定义图标, 代码现在是这种形式，这种形式只会渲染出字符串，

<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>

要这么写

<uni-icons fontFamily="CustomFont" :size="26">&amp;#xe8bd;</uni-icons>

下面v-for的写法，也是不对的，要用v-html, 不要写{{ item.unicode }}

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont">{{item.unicode}}</uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>

正确写法

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont" v-html="item.unicode"></uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>

示例代码：

正确写法1

<uni-icons fontFamily="CustomFont" :size="26">&amp;#xe8bd;</uni-icons>

正确写法2

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont" v-html="item.unicode"></uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>  

const sentenceList = ref([
  {
    name: "随手记",
    unicode: "&amp;#xe8ad;",
  },
  {
    name: "审核",
    unicode: "&amp;#xe602;",
    count: 9,
  },
  {
    name: "收藏",
    unicode: "&amp;#xe8bc;",
    count: 99,
  }
])

Harmonyos Next教程
2 回复

https://juejin.cn/spost/7425803259442642983, 不能用这种，要用 "\ue8ad"这种， 文档没有问题


在uni-app中，使用uni-icon组件通过fontFamily自定义图标时，如果文档用法有误，通常可能是由于一些配置或代码实现细节上的疏忽。以下是一个修正后的示例，展示如何通过fontFamily自定义图标，并确保一切配置正确。

首先，确保你已经在项目中引入了自定义的字体图标文件（如.ttf、.woff等），并在项目的全局样式文件（如App.vue的<style>部分）中正确声明了字体。

步骤1：引入字体文件

假设你的字体文件名为my-icons.ttf，放置在static/fonts/目录下。

步骤2：声明字体

在App.vue的<style>标签内添加以下CSS代码，声明字体名称、字体文件路径等：

<style>
@font-face {
  font-family: 'my-icons';
  src: url('@/static/fonts/my-icons.ttf') format('truetype');
}

/* 定义图标的Unicode码点对应的样式，这里只是示例 */
.my-icon-home::before {
  content: "\e900";
  font-family: 'my-icons';
  font-size: 24px;
  color: #333;
}

.my-icon-search::before {
  content: "\e901";
  font-family: 'my-icons';
  font-size: 24px;
  color: #333;
}
</style>

步骤3：使用uni-icon组件

在需要使用图标的组件中，通过class属性应用自定义的图标样式，而不是依赖uni-icon组件的内置图标集。由于uni-icon组件本身不支持直接通过fontFamily属性设置图标，我们需要通过CSS伪元素来实现：

<template>
  <view>
    <view class="my-icon-home"></view>
    <view class="my-icon-search"></view>
  </view>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
/* 这里可以添加额外的样式，如果需要的话 */
</style>

注意，这里我们并没有直接使用uni-icon组件，而是利用了CSS伪元素::before来插入自定义字体的图标内容。这是因为uni-icon组件主要用于其内置的图标集，而不直接支持通过fontFamily自定义图标。

确保你的字体文件和CSS声明正确无误，且图标Unicode码点与你的字体文件匹配。通过这种方式，你可以在uni-app项目中灵活地使用自定义图标。

回到顶部