uniapp项目如何使用iconfont矢量图

一.介绍

        很多同学在写自己的uniapp项目时都会想要使用一些小图标来美化自己的页面，下面我将使用两个方法在uniapp项目使用矢量图，希望能帮助到大家。

二.方法一

1.首先你需要在iconfont的个人主页的我的项目中创建一个新的项目，如图：

2.然后点击上方搜索，获取自己想要的矢量图，点击添加入库，后将库中的所有矢量图添加到自己创建的项目中，如图：

3.现在在库中的全部矢量图都在项目中了，点击下载到本地，再将下载的zip文件解压到uniapp项目文件夹的static文件夹中，如图：

4.现在就可以开始使用矢量图了，我将以给tabBar管理标签页加矢量图为例子给大家展示如何使用，如下：

4.1.首先我创建了三个页面分别用于对应我三张矢量图。

4.2.编辑tabBar代码，如下：

· iconfontSrc填写iconfont地址一直写到iconfont.ttf,是为了可以一次性读出所有矢量图。

· text填写的是iconfont代码，将iconfont代码前&#x换成\u,就可以使用了。

代码如下：

"tabBar": {
		"iconfontSrc": "/static/font_4517310_acae7y2198/iconfont.ttf",
		"color": "red",
		"selectedColor": "black",
		"list": [
			{
				"iconfont": {
					"text": "\ue650",//
					"selectedText": "\ue650",
					"fontSize": "30rpx",
					"selectedColor": "red"
				},
				"pagePath": "pages/index/index",
				"text": "主页"
			},
			{
				"iconfont": {
					"text": "\ue600",//
					"selectedText": "\ue600",
					"fontSize": "30rpx",
					"selectedColor": "red"
				},
				"pagePath": "pages/chat/chat",
				"text": "聊天"
			},
			{
				"iconfont": {
					"text": "\ue797",//
					"selectedText": "\ue797",
					"fontSize": "30rpx",
					"selectedColor": "red"
				},
					"pagePath": "pages/mine/mine",
					"text": "主页"
			}
		]
	}

运行效果:

5.如果你想将矢量图用到别的页面，那我们就需要先将iconfont压缩文件中的iconfont.css引用到App.vue的公共样式中，如下：

 

如果我们此时运行的话会报如下错误：

这是因为在iconfont.css中使用的是相对路径，我们将它换成绝对路径就行了。

 

改成

此时我们再去页面引用矢量图就没问题了。

运行效果

三.方法二

1.还是和方法一的1.2.点一样将要用的矢量图添加到自己的项目，然后点击font class将css代码复制下来，如下：

 2.在uniapp项目中，创建一个iconfont.css将刚才复制的代码复制到css中，如下：

3.将iconfont.css引入到App.vue作为公共样式，如下：

4.现在就可以使用矢量图了。

 运行效果：

 

如果此时你觉的适量图不够用需要加些新的， 可以再去iconfont里找些矢量图添加到自己在iconfont里创建的项目中，此时点击font class 会显示“点击更新代码”，我们点击它并把新的代码复制下来，替换一下uniapp项目中自己创建的iconfont.css中的代码就能使用新添加的矢量图了，如下。

 在需要的页面引用矢量图。

运行效果

 

四.最简单方法 

1.这里再说一个最简单方法，如果不想使用上述方法，想使用简单暴力的，那就直接把图片下载到iconfont里的矢量图下载到uniapp项目中的static里，像使用图片一样使用。