在Uniapp中实现在线使用iconfont的图标

icanfont官网

iconfont官网：iconfont-阿里巴巴矢量图标库

在自己建的项目下：点击  Font Class 可以看到下面的在线  css文件

1. 在 <style> 标签中，使用 @import 指令来引入在线的 CSS 文件。例如：

<style>
      @import url('//at.alicdn.com/t/c/font_4137720_b874rv89kze.css');
</style>

    确保替换代码中的 URL 为实际的在线 CSS 文件的链接。 

   2.在需要使用 Iconfont 图标的地方，例如模板中，使用对应的类名来显示图标。

<template>
   <text class="iconfont icon-图标名称"></text>
</template>

     将 icon-图标名称 替换为实际需要使用的图标名称。您可以在 Iconfont 图标库中选择合适的图标，并查找对应的图标名称。

3.重新编译运行 UniApp 项目，即可在您的应用程序中成功使用在线的 CSS 文件和 Iconfont 图标。

请注意使用在线 CSS 文件的链接时需要确保网络可访问，并且要使用正确的 CSS 文件链接地址。

例如：

在相应的.vue文件中：

先：

然后：

 运行后就可以了：

 

老师域名：huruqing.cn:3008