现在很多人或者企业都喜欢开发微信小程序，因为不用下载啊，可以像软件那样使用，可是我发现，我只会使用框架中的图标，看到很多好看的图标网站比如阿里图标库的图标，却不会用，怎么办呢？今晚就来解决这个问题：使用vue.js开发微信小程序添加其他库图标。
一、使用框架库的图标一般vue.js框架都会有图标，比如像uni-app框架和element框架都自带图标库。使用方式是引入框架。然后再加入图标的class就可以了。下面例子是使用uni-app框架加入图标的方式，首先要下载图标文件到项目中，然后引入。
例如：
<
uni-icon class="search-icon" type="search" size="30"><
/uni-icon>
import uniIcon from "@/components/uni-icon/uni-icon.vue"
文章图片
二、像图片那样加入图标这种事比较蠢的方法，当然如果图标够少的话也没有问题。说明白是像图片那样加入图标了，那肯定是不能再使用css修改图片的颜色的了。像导航类图标。事先要像图片加到到项目的【static】文件的目录下。然后还要引入到项目中。
【vue开发微信小程序图标如何引入的问题——已解决】例如：
<
!-- menu html -->
<
uni-grid :options="menu" column-num="5"show-border="false">
<
/uni-grid>
<
script>
import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"
import img5 from "@/static/img-05.jpg"export default {
components: {uniIcon,uniGrid},
data() {
return {
menu:[
{image:img1,text:'圣诞树'},
{image:img2,text:'铃铛'},
{image:img3,text:'圣诞老人'},
{image:img4,text:'礼物'},
{image:img5,text:'帽子'}
],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
}
}
}
<
/script>
文章图片
三、引用图标网站的图标1、下载
引用图标网站的图标，比如我们都使用阿里图标库，上面那么多图标，想用哪个就用哪个，不用像框架图标那样，同化率太大了。首先要将图标文件下载下来解压放到【static】目录下。
例如：
文章图片
2、引用
放入到项目的文件要引入到页面中，我们一般都在全局文件中引用（main.js），这样所有文件都可以使用了，免得要使用的时候再次引入。在html文件中使用图标只需要写该图标的的class或者Unicode都是可以了。
例如：
//html
<
view class="icon-buoumaotubiao16 iconfont" style="color: red;
"><
/view>
//js
<
script>
import "@/static/style/iconfont.css"
<
/script>
推荐阅读
- 好用的vue开发工具和插件——力荐篇
- vue开发环境的搭建安装操作手册——七步搞定
- 计算机病毒–从新手到专业人士
- JavaScript for-in循环详细用法指南
- PHP中的关联数组详细介绍
- 算法（递归函数检查字符串是否是回文）
- Python MySQL 删除表用法指南
- 8086微处理器中的寻址模式详细指南
- 金融市场中的云计算服务简介