这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

具体步骤

vue如何在创建好的项目中引入阿里图标 iconfont 呢，涉及到以下几个步骤：

• 将图片加入购物车
• 将图标添加至图标项目中
• 项目目录
• 将图标添加至 vue 项目中
• 在项目中使用图标
• 效果展示

各步骤解析

将图片加入购物车

首先先到阿里图标官方网站www.iconfont.cn/，先对账户进行登录，登录完成后任意选择几个图标加入购物车

将图标添加至图标项目中

加入购物车后，点击页面最右上方的 “购物车” 按钮，之后点击 “添加至项目” ，添加完成之后，到 “我的项目” 中查看，同时点击 “下载到本地” 进行下载。

项目目录

下载完成后，接下来是引入 vue 项目中。创建完 vue 项目之后，项目目录如下：

将图标添加至 vue 项目中

在assets中创建目录名为iconfont的目录，创建完成后，将刚刚第二步下载后的9个文件拷贝到此目录。

在项目中使用图标

之后在 src 文件下的 main.js 引入文件，具体引入形式如下：

import './assets/iconfont/iconfont.css';

注：此处引入路径根据自身所放入文件地址进行调整

6、引入后，就可以在项目中使用啦！具体使用方式：

<template>
	<div id = "main">
		<i class = "iconfont icon-daohanglan"></i>
		<i class = "iconfont icon-xiaoxi"></i>
	</div>
</template>

<script>
	export default{
		name:''
	}
</script>

<style scoped>
	#main i{
		font-size: 80px; /* 控制图标的大小 */
		color: #0062CC; /*控制图标的颜色*/
		margin: 80px 20px;
	}
</style>

注： class 名字为字符串iconfont再加上具体图标的图标名所组成，图标名可通过阿里图标官网在“我的项目”中对对应图标复制代码后粘贴查看。

效果展示

最终显示效果：