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"></span>
在这个地方需要注意， class="iconfont"这个是必须要加上的，曾经我因为这个问题找了很久的错误，不要忘记一定要加上这个 class=“iconfont” -
好了，这个时候就完成了iconfont的使用，结束！