vue和小程序项目中使用iconfont的方法

为了在Vue和小程序项目中使用iconfont，需要遵循以下步骤：

步骤1：注册iconfont账号并添加图标资源

首先需要注册一个iconfont账号，并创建一个新项目以添加所需的图标资源。在添加完成后，可以在账号中找到相应的图标链接。

步骤2：复制链接并引入项目

从iconfont的项目页面复制图标链接，并将其添加到Vue或小程序项目中的HTML文件中：

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_xxxx.css" />

请注意，图标链接中的“xxxx”应该是所创建的iconfont项目的ID号。

步骤3：在Vue项目中使用iconfont

在Vue项目中，可以使用类似于以下的方式使用iconfont：

<template>
  <div>
    <i class="iconfont icon-marketing"></i>
  </div>
</template>

<style>
  @font-face {
    font-family: "iconfont";
    src: url("//at.alicdn.com/t/font_xxxx.eot"); /* IE9以下 */
    src: url("//at.alicdn.com/t/font_xxxx.eot?#iefix") format("embedded-opentype"), /* IE9以上，修复*/
      url("//at.alicdn.com/t/font_xxxx.woff") format("woff"), /* chrome、firefox */
      url("//at.alicdn.com/t/font_xxxx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/t/font_xxxx.svg#iconfont") format("svg"); /* iOS 4.1- */
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-marketing:before {
    content: "\e697";
  }
</style>

请确保将HTML代码中的图标名称（“icon-marketing”）替换为适当的名称，该名称可在iconfont的项目页面中找到。

步骤4：在小程序中使用iconfont

在小程序中，可以使用类似于以下的方式使用iconfont：

<text class="iconfont icon-marketing"></text>

同样，需要在CSS中添加与其对应的样式：

@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/font_xxxx.eot"); /* IE9以下 */
  src: url("//at.alicdn.com/t/font_xxxx.eot?#iefix") format("embedded-opentype"), /* IE9以上，修复*/
    url("//at.alicdn.com/t/font_xxxx.woff") format("woff"), /* chrome、firefox */
    url("//at.alicdn.com/t/font_xxxx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("//at.alicdn.com/t/font_xxxx.svg#iconfont") format("svg"); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

同样，请确保将图标名称（“icon-marketing”）与其对应的样式类名一致。

示例

以下是一个Vue项目中使用iconfont的示例：

<template>
  <div>
    <i class="iconfont icon-marketing"></i>
    <i class="iconfont icon-sales"></i>
  </div>
</template>

<style>
  @font-face {
    font-family: "iconfont";
    src: url("//at.alicdn.com/t/font_xxxx.eot"); /* IE9以下 */
    src: url("//at.alicdn.com/t/font_xxxx.eot?#iefix") format("embedded-opentype"), /* IE9以上，修复*/
      url("//at.alicdn.com/t/font_xxxx.woff") format("woff"), /* chrome、firefox */
      url("//at.alicdn.com/t/font_xxxx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/t/font_xxxx.svg#iconfont") format("svg"); /* iOS 4.1- */
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-marketing:before {
    content: "\e697";
  }
  .icon-sales:before {
    content: "\e6a2";
  }
</style>

以下是一个小程序中使用iconfont的示例：

<view>
  <text class="iconfont icon-marketing"></text>
  <text class="iconfont icon-sales"></text>
</view>

<style>
  @font-face {
    font-family: "iconfont";
    src: url("//at.alicdn.com/t/font_xxxx.eot"); /* IE9以下 */
    src: url("//at.alicdn.com/t/font_xxxx.eot?#iefix") format("embedded-opentype"), /* IE9以上，修复*/
      url("//at.alicdn.com/t/font_xxxx.woff") format("woff"), /* chrome、firefox */
      url("//at.alicdn.com/t/font_xxxx.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/t/font_xxxx.svg#iconfont") format("svg"); /* iOS 4.1- */
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-marketing:before {
    content: "\e697";
  }
  .icon-sales:before {
    content: "\e6a2";
  }
</style>