标签:项目 制作 firefox opera 创建项目 android 巴巴 dde vue
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官网 进入项目 所需图标上有复制代码 复制代码便可)
<!--  就是复制的图标代码--> <span class="iconfont"></span>
标签:项目 制作 firefox opera 创建项目 android 巴巴 dde vue
原文地址:https://www.cnblogs.com/rickyctbur/p/11768984.html