【Uni-App社区小程序】005-引入自定义图标库

一、Iconfont-阿里巴巴矢量图标库

1、基本信息

简介

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能；

阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具；

免费；

网址

https://www.iconfont.cn/

首页截图

登录

推荐使用微博账号登录；

2、使用

第一步：通过搜索等方式找到你想要的图标，鼠标放上去，点击购物车图标，将你想要的图标加入购物车；

第二步：点击右上角购物车图标，再点击“添加至项目”，然后点击新建项目图标

第三步：输入项目名，点击“确定”即可

第四步：网页会自动跳转到如下页面

第五步：点击“下载至本地”按钮，下载图标库

第六步：解压压缩包后，得到如下文件

3、引入

第一步 ：将文件夹中的iconfont.css文件复制到我们的项目

第二步：删除一些不需要的内容，如图

（1）删除内容1

（2）启动自动换行功能

（3）删除内容2

第三步：引入自定义图标库

第四步：使用图标

（1）打开pages下index目录下index.vue文件，删除一些不需要的代码，结果如：

<template>
	<view>
		<view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

（2）使用图标

<template>
	<view>
		<view class="iconfont icon-ziyuan1" style="font-size: 200rpx;">
			
		</view>
	</view>
</template>

(3)结果

（4）备注，图标对应的名字可打开下载的图标库解压后的文件夹中的demo_index.html文件查看