🐰
font-awesome
使用类的方式
npm 安装
font-awesome1
npm install font-awesome
在
main.js中引入1
import '@/assets/css/font-awesome.css' // 引入font-awesome字体图标
在组件中通过类名的方式引用
1
<span class="fa fa-camera-retro fa-lg"></span>
使用组件的方式
安装
vue-awesome依赖包1
npm install vue-awesome
注意：安装之后打开node_modules文件夹，查看是否有vue-awesome文件夹
在 main.js 文件下
1
2
3
4
5
6
7
8
9// 如果考虑项目大小，只导入使用的图标，减少包大小
import 'vue-awesome/icons/flag'
// 否则，全部导入
import 'vue-awesome/icons'
// 注册组件
import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon)在组件中使用
1
<icon name="beer"></icon>
iconfont
三种传统使用方式
Unicode
优势
- 兼容性最好，支持ie6+
- 支持按字体的方式去动态调整图标大小，颜色等等
劣势
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
unicode的书写不直观，语意不明确。光看这个unicode你完全不知道它代表的是什么意思
因为以上劣势（尤其是第三点），放弃使用这个方式。具体使用看最前面的链接教程
font-class
与unicode使用方式相比，具有如下特点：
- 兼容性良好，支持ie8+
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
缺点：
- 依旧无法支持多色图标
https://segmentfault.com/a/1190000012213278#articleHeader4
注意：
- 使用这种方式一定要注意命名空间
使用方法：
添加图标到iconfont的购物车，生成项目
拷贝项目下面生成的fontclass代码，下载并引入
注意拷贝css文件和字体文件到assets文件目录
在main.js中引入
iconfont.css文件1
import './assets/iconfont/iconfont.css' // 引入iconfont图标
获取图标的类名，应用于页面（一定不能忘记命名空间）
1
<i class="iconfont icon-xxx"></i>
引入iconfont在线地址的几个方法
在index.html中引入在线资源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html lang="en" style='height: 100%;'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 引入下面这个cdn资源 -->
<link rel="icon" href="//at.alicdn.com/t/font_918300_q5yxfof3wjo.css">
<title>vue-shop-front</title>
</head>
</html>在mainjs中使用Vue.use()引入
1
Vue.use('//at.alicdn.com/t/font_918300_q5yxfof3wjo.css')
在App.vue中import引入（前提是你得使用了预处理器）
1
2
3
4
5
6
7<style lang="scss" scoped>
@import url("//at.alicdn.com/t/font_918300_q5yxfof3wjo.css");
#wrap-box {
height: 100%;
// height: 1000px;
}
</style>
symbol
https://segmentfault.com/a/1190000012213278#articleHeader5
优雅的使用方式
目前暂时为了省事还是使用font-class吧
下面对svg封装组件的方式比较麻烦，有时间可以研究下：
https://segmentfault.com/a/1190000012213278#articleHeader6