VUE中iconfont的使用

VUE中iconfont的使用

• 首先进入iconfont的官网，点击图标库

• 进入图标库后任意选择你需要的图标加入购物车中
  

• 在右上角找到购物车后点击添加至项目，然后加入到你的项目中去，再点击确定
  -

• 接着进入你的项目，把刚刚加入项目的图标下载下来
  

• 找到刚刚下载下来的文件，解压缩
  

• 接下来进入你的项目，在src->assets->css中创建一个文件夹叫做iconfont，然后把刚刚解压出来的文件中的这四个文件放到新建的iconfont文件夹中，把 刚刚解压出来的文件中的iconfont.css放到项目的src->assets->css中

• 在项目中打开iconfont.css这个文件然后在这些url的地址前都加入文件夹地址（除了data:application/x-font-woff2;charset=utf-8;base64这个url）
  

• 接下来就要引入iconfont了，在main.js中引入iconfont.css

• 如何在页面上使用iconfont呢？首先去刚刚iconfont的官网找到你想用的iconfont，鼠标移到上面点击复制代码
  

• 接下来找到你想用iconfont的位置，然后在这个位置加上
  <span class="iconfont">&#xe7ae;</span>
  在这个地方需要注意， class="iconfont"这个是必须要加上的，曾经我因为这个问题找了很久的错误，不要忘记一定要加上这个 class=“iconfont”

• 好了，这个时候就完成了iconfont的使用，结束！