下载掌阅APP，畅读海量书库
立即打开
在前端开发中，图标是必不可少的部分。精美的图标不仅可以提高开发效率，还可以使页面更加美观。阿里巴巴矢量图标库包含了大量、丰富的图标，可以满足前端开发的需求。Element提供了一套常用的图标集合，可以通过类el-icon-iconName来使用这些图标。
在使用Element的图标之前，需要先在Element官网下载element-icons.ttf和element-icons.woff文件。具体方法为：在Element官网的首页中单击“组件”按钮，然后单击“unpkg.com/element-ui”，在弹出的页面中打开文件夹“lib\theme-chalk\fonts”，可看到文件element-icons.ttf和文件element-icons.woff，如图2-13所示。
图2-13 文件element-icons.ttf和文件element-icons.woff
单击文件element-icons.ttf，可打开该文件的页面，如图2-14所示，单击图中的“View Raw”即可下载该文件。使用同样的方法下载文件element-icons.woff。
图2-14 文件element-icons.ttf的页面
在项目的Element目录下新建文件夹fonts（见图 2-15），然后将下载后的两个文件element-icons.ttf和element-icons.woff复制到文件夹fonts中即可。
至此，我们就可以使用Element的图标了。下面将通过一个简单的页面（见图2-16）来介绍Element图标的使用方法。
图2-15 新建的文件夹fonts
图2-16 使用Element图标的页面
图2-16所示的页面只展示了部分图标，要想使用更多的Element图标，请查看Element官网首页的“组件”下的“Icon图标”，如图2-17所示。
图2-17 Element官网中“组件”下的“Icon图标”
在使用标签时，通过为标签i定义不同的class值可以获取不同类型的图标；在使用按钮时，通过定义icon属性的值可以将图标融入按钮。实现代码如下：
