今天在引用图标的时候发现Element-UI中的字体图标非常有限,我数了下当前只有70个可用字体图标,很难找到合适的字体图标使用,所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用,足够我们平时使用了。
![631bef7e26e385d4528d78d20e5284cc.png](https://i-blog.csdnimg.cn/blog_migrate/1cbae771320d08a15db4b23e75a0bc2d.jpeg)
首先我们先来安装Font Awesome字体,在Font Awesome 4版本中,可以通过使用npm安装font-awesome依赖,我们要在终端输入命令:npm install font-awesome 即可安装基础依赖, Font Awesome在Vue环境中使用需要的Vue组件,所以我们接着还要继续安装,在终端输入命令:npm install vue-fontawesome
![e7838ad823d633ea8d8d1f2bc5e5d7d8.png](https://i-blog.csdnimg.cn/blog_migrate/fe48774bbd7f91d4a78864907b3b9edd.jpeg)
接着我们在main.js中引入Font Awesome字体样式,在头部我们添加个引用:import 'font-awesome/css/font-awesome.css'即可
![9b4a153bec1b4f8ee8b9b1168c59d61f.png](https://i-blog.csdnimg.cn/blog_migrate/f8a43fb8817112af553d0fed2a1cf3c9.jpeg)
接下来我们就可以使用Font Awesome字体l ,Font Awesome 被设计为用于行内元素,所以我们通常用i标签来定义,在class中可以通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。
![fbc40fde3cadf0eb2596dc71c88c049e.png](https://i-blog.csdnimg.cn/blog_migrate/6ebe42c5df5fff6f98cacf9c1a87e748.jpeg)
具体的图标样式我们可以进入Font Awesome 中文网去查看你想要的图标,上面会提供对应的引入方式,你也可以在搜索框内用英文输入我们想搜索的内容:
![1f95c5daf4e50624bb724726fb56a14c.png](https://i-blog.csdnimg.cn/blog_migrate/bb18382e3b17369f5f438eb5d568f3cc.jpeg)
Font Awesome提供了很多方便的使用技巧,比如说调整图标相对大小, 使用 fa-lg(33% 递增) , fa-2x, fa-3x, fa-4x, 或 fa-5x,我们只要在图标引用后面添加你想要的大小即可。
![aae24c7ea3b513f422cfe7362684b833.png](https://i-blog.csdnimg.cn/blog_migrate/7906e9e91f8e426d63e866d6e7d6b037.jpeg)
如果你想让图标动起来,那么可以使用 fa-spin 使任意图标旋转,还可以使用 fa-pulse 使其进行8方位旋转 ,相当的炫酷,最主要是操作简单方便又快捷,的确挺好用的。
![c784d9f21ab0227a326c254e4e0472e8.png](https://i-blog.csdnimg.cn/blog_migrate/483506abc4edbbe1317357821a43c0d3.jpeg)
还有很多很多其他方便的功能,有兴趣的可以自己查看官方案例 http://www.fontawesome.com.cn/examples/