可以在阿里图库中下载相应的图标，下到本地后
第一步：拷贝项目下面生成的font-face
@font-face {font-family: 'iconfont'
src: url('iconfont.eot')
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg')
}
第二步：定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important
font-size:16pxfont-style:normal
-webkit-font-smoothing: antialiased
-webkit-text-stroke-width: 0.2px
-moz-osx-font-smoothing: grayscale}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：拷贝项目下面生成的fontclass代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>一般在 src/main.js 中引入（在 index.html 中也可以，当然 app.vue 中也可以）
本文主要来看看，是如何通过 src/styles/index.less 一层层引入 icon 对应的样式的
① src/styles/index.less
② src/styles/common/index.less
③ src/styles/common/iconfont/ionicons.less
引入字体文件： _ionicons-font.less
将字体整合成样式： _ionicons-icons.less
自行搜索答案吧！
block
inline
inline-block ：同时具备 inline、block 的特点。
指定名为 myFirstFont 的字体，并指定在哪里可以找到它的 URL (可以多个地址，以逗号分隔)：
@font-face 中的其他可选项（当然这些选项可以直接定义在某个样式中）
具体使用时再指定对应的 font-family 即可font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的 px 下显示的大小是不同的
在火狐下的显示效果如下
可以看到同样是16px的字体显示到浏览器中缺大小不一，可能会是原来安排好的页面布局产生混乱，这是最令人难过的事情了。那么：
给每个 css 中添加了不同的 font-size-adjust 值，现在在浏览器中的显示效果如我们所愿（默认按照最后一个字体的大小显示）：
在看 font-size-adjust 这个主角之前，我们先看这个属性的值 -- aspect ，什么是 aspect 呢？举例： Verdana 的 aspect 值是 0.58 （意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。每一种字体都有自己的默认aspect值。
浏览器对于 aspect 值的计算方法： c=(a/b) s
所以当我们在我们的页面中使用了与页面原始不同的字体时，我们可以利用 font-size-adjust 来调整这个外来字体的大小，使他看起来和页面原始字体的大小一样，这样就不会对页面的布局产生不可预告的影响了。
实例 ，指定在一个声明的所有字体属性：
属性定义及使用说明
几个对应的属性值说明
font-family 属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。
你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:
下面是一些常用的字体组合，通用的字体系列
img {
background: url(../images/windowShutHover.png) no-repeat
}
