在uni-app使用iconfont中的图标

uni-app 如何使用iconfont中的图标

在uni-app中使用Iconfont图标通常涉及以下几个步骤：

步骤一：获取Iconfont资源

1. 访问 iconfont-阿里巴巴矢量图标库，注册并登录账号。

2. 浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。

3.  完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件：

• iconfont.css 或 iconfont.min.css：包含字体文件的引用及样式声明。
• iconfont.eot、iconfont.ttf、iconfont.woff、iconfont.woff2等字体文件。
• demo_index.html：示例文件，展示如何在HTML中使用这些图标。

步骤二：整合Iconfont资源到uni-app项目

1. 将字体文件放入项目：

   • 将下载的字体文件（.eot、.ttf、.woff、.woff2）放入uni-app项目的static目录下，例如创建一个子目录fonts存放它们，以便统一管理。

2. 引入Iconfont样式：

   • 将iconfont.css或iconfont.min.css文件复制到项目的static目录或uni.scss所在的样式目录（如/common）。

   • 在main.js或全局样式文件（如uni.scss）中通过@import语句引入Iconfont样式。例如，如果将iconfont.css放在static目录下，则引入语句如下：

     @import "~@/static/iconfont.css";

步骤三：在Vue页面或组件中使用Iconfont图标

使用Unicode编码：

• 查看下载包中的demo_index.html或直接在Iconfont网站上查看每个图标的Unicode编码。

• 在Vue模板中，使用<text>标签结合v-for循环（如果有多图标）或直接插入Unicode编码来显示图标：

  <template>
    <view>
      <!-- 单个图标 -->