在uni-app中插入图标有两种方法,一种是使用 阿里图标库 等第三方图标库,另一种是使用uni-app插件市场里的图标库,在使用HBuilderX开发的时候,后者通常比较便捷,下面详细地介绍一下两种图标库的使用

1.第三方图标库(阿里图标库等)

在首页——搜索栏中搜索需要的图标

将需要的图标加入购物车

右上角的购物车中,将购物车中的图标加入项目,并在项目中选择font Class,并点击右侧的查看在线链接

在浏览器中输入链接,复制里面的css代码,在项目目录下的新建css文件,并将网页中的css代码粘贴到里面

在需要的页面引入图标:

<template>
      <text class="iconfont icon-search"></text>
</template>
<style lang="scss">
	@import '../../common/css/icons.css';
</style>

PS:iconfont icon-search为网页css代码中的类名

2.uni-app插件市场

打开 插件市场 ,在搜索框中搜索icons,会出现很多图标插件

如果里面包含需要的图标,可以直接点击右侧的使用HBuilderX导入插件,插件会自动安装在HBuilderX中

无需@inport引入,直接用标签就可以了(search为图标名称,在components——uni-icons——icons.js中可以查看名称列表):

<template>
      <uni-icons type="search"></uni-icons>
</template>