uniapp引用iconfont图标及用法

引入方法

1.在iconfront-阿里巴巴矢量图标官网找好图标

2.点击复制图标代码

• 打开找好相对应的图标
  

• 点击红圈的复制代码后在网页打开，出现如下：
  

• 在项目下新建common文件夹,common文件夹下新建iconfont.css。把iconfont的代码复制到iconfont.css。记住要将iconfont.css文件内url路径转换为在线路径即加上https:如下：
  
  **使用方式 **
  1.在App.vue里全局引入该图标文件@import “/common/iconfont.css”
  2.在每个vue页面的template区域直接使用就可以啦~

• 通常用法

  <i class="iconfont icon-QQ"></i>
  

• v-for循环用法

  <template>
  	<view>
  		<view class="icont-view" v-for="(item,index) in iconfontList">
  			<i class="iconfont">{{item.icon}}</i>
  			<text>{{item.title}}{{index}}</text>
  		</view>
  	</view>
  </template>
  
  <script>
  	export default{
  		data(){
  			return{
  				iconfontList:[
  					{
  						icon:'\uf124',
  						title:'标题'
  					},
  					{
  						icon:'\uf12a',
  						title:'标题'
  					},
  					{
  						icon:'\uf11a',
  						title:'标题'
  					},
  					{
  						icon:'\uf12b',
  						title:'标题'
  					},
  					{
  						icon:'\uf106',
  						title:'标题'
  					}
  				]
  			}
  		},
  		methods:{
  			
  		}
  	}
  </script>
  
  <style lang="scss">
  </style>
  

  完结啦~