uni-app添加外部Iconfont图标-过程很坎坷

第一次用Markdown写博客，有点不习惯，但总归要习惯的，哈哈。

昨天在uniapp用到图标，发现阿里的图标不错，想拿来用一下，出现了问题就是样式没引用成功，在微信开发者工具上只看到一个小正方形，不管样式是放在App.vue进行全局引用，还是在页面的style里面引用，发现对应的图标就是完全不显示，下面来说说大概过程。。。

其实在style和app.vue里面写好引入格式有时候就行了，但坑猿的是，有时候编译不来，只是出现小正方形，所以觉得以下解决方法较好。

style和app.vue引入方式

//注意：有分号或者无分号，这些细节错了也会报错
@import url("uni-icon.css")

在阿里Iconfont下载好图标样式（我们这里只介绍引入本地的方式）

1.官网选择好图标引入自己的项目中
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.6&type=4

2.下载到本地，解压后如下，只需复制之中的iconfont.css和iconfont.ttf就好，放到uniapp下的common目录下

//iconfont.css代码

@font-face {
    font-family: uniicons;
    font-weight: normal;
    font-style: normal;
    src: url('https://at.alicdn.com/t/font_1359730_spt3al24r9.ttf') format('truetype')
}

/* @font-face {
    font-family: uniicons;
    font-weight: normal;
    font-style: normal;
    src: url('~@/common/iconfont.ttf') format('truetype')
} */

.icon {
    font-family: "uniicons" !important;
    font-size: 48upx;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

.col{
	color: #4CD964;
}

/* 加进来的图标 */
.icon-lunkuodasan-:before {
  content: "\e604";
}

.icon-lunkuodasan-2:before {
  content: "\e606";
}

.icon-lunkuodasan-3:before {
  content: "\e607";
}

.icon-lunkuodasan-4:before {
  content: "\e60c";
}

.icon-lunkuodasan-5:before {
  content: "\e616";
}

.icon-lunkuodasan-6:before {
  content: "\e617";
}

.icon-lunkuodasan-7:before {
  content: "\e618";
}

.icon-lunkuodasan-1:before {
  content: "\e61a";
}

.icon-lunkuodasan-8:before {
  content: "\e61e";
}

.icon-lunkuodasan-9:before {
  content: "\e61f";
}

.icon-lunkuodasan-10:before {
  content: "\e620";
}

.icon-lunkuodasan-11:before {
  content: "\e621";
}

3.如果在App.vue或者页面的style下面引入，有时候结局是不好的，它给你一个小正方形

图标引入

//index页面
<template>
	<view class="uni-column">
		<view class="">
			<view class="">
				
				<text class="icon iconcolicon-lunkuodasan-11 ">&#xe621;</text>
				<text class="icon icon-lunkuodasan-10 selfStyle">&#xe620;</text>
				
			</view>
			
			<view class="">
				<text class="icon icon-lunkuodasan-1"></text>
				<text class="icon icon-lunkuodasan-10"></text>
			</view>
			
		</view>
		
		
		
		
	</view>
	 
</template>

<script>
	// import 'common/uni-icon.css'//这里引入也可以，但style
		
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
	    components: {uniPopup},
		 methods:{
		        openPopup(){
		            this.$refs.popup.open()
		        },
		        closePopup(){
		            this.$refs.popup.close()
		        }
		    }
	}
</script>

<style>	
	//style引入
	/* @import url("common/uni-icon.css") */
	
	
	
</style>

悲剧了

4.当然有时候这样引入也没错，只要对应路径，写的对，有时候重启一下项目和编辑器就行了

5.对于这种情况下，一直图标显示不正常。下一个解决办法就是把文件引入script或者main.js中。亲测有效。。。

只需加一行，显示马上正常，script引入也是如何一行，但它不是全局引入，就不在截图出来了

import 'uni-icon.css'//导入图标

6.引入成功后就可以直接调用了，当然，你要是图标不够用，可以继续去阿里妈妈那里拿咯，具体操作可以看

链接: https://www.cnblogs.com/qiu-Ann/p/11354095.html.

总结：

	学习就是慢慢积累的过程，再难的问题，经过我们的推敲与实践，总会过去的，哈哈。
	要是有错或者有需要改的地方，请大家在?下方留言喔，请多指教。