vue图标制作

Posted 2020-12-01 rickyctbur

方法一：

　　1.进入阿里巴巴矢量图标库网站 https://www.iconfont.cn 

　　2.创建项目

　　3.进入图标库中选取所需图标 添加到购物车 然后添加到创建的项目中

　　4.点击下载至本地 解压文件

　　5.在src目录下的assets目录下的styles文件中创建iconfont文件夹

　　6.将解压文件中 iconfont.woff iconfont.eot iconfont.svg iconfont.ttf 四个文件 放入创建的 iconfont文件夹中

　　7.将解压文件中的 iconfont.css 文件放入 src目录下的assets目录下的styles文件夹中

　　8.进入 iconfont.css 更改图标路径 

  src: url(‘./iconfont/iconfont.eot?t=1572451090913‘); /* IE9 */
  src: url(‘./iconfont/iconfont.eot?t=1572451090913#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘./iconfont/iconfont.woff?t=1572451090913‘) format(‘woff‘),
  url(‘./iconfont/iconfont.ttf?t=1572451090913‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, android, ios 4.2+ */
  url(‘./iconfont/iconfont.svg?t=1572451090913#iconfont‘) format(‘svg‘); /* iOS 4.1- */

 　　　　iconfont就可以使用了

 　　9.使用iconfont：在入口文件main.js中全局引入iconfont文件

import ‘./assets/styles/iconfont.css‘; //引入图标文件

　　　　在要使用的组件中使用iconfont图标 ( 在span标签中使用 打开iconfongt官网 进入项目 所需图标上有复制代码 复制代码便可）

            <!-- &#xe606; 就是复制的图标代码-->
            <span class="iconfont">&#xe606;</span>