vue实战开发008:引入Font Awesome字体图标

今天在引用图标的时候发现Element-UI中的字体图标非常有限，我数了下当前只有70个可用字体图标，很难找到合适的字体图标使用，所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用，足够我们平时使用了。

 首先我们先来安装Font Awesome字体，在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖，我们要在终端输入命令：npm install font-awesome 即可安装基础依赖, Font Awesome在Vue环境中使用需要的Vue组件，所以我们接着还要继续安装，在终端输入命令：npm install vue-fontawesome

npm install --save font-awesome
npm install --save vue-fontawesome

 

 接着我们在main.js中引入Font Awesome字体样式，在头部我们添加个引用：import 'font-awesome/css/font-awesome.css'即可

 接下来我们就可以使用Font Awesome字体l ,Font Awesome 被设计为用于行内元素，所以我们通常用i标签来定义，在class中可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。

具体的图标样式我们可以进入Font Awesome 中文网去查看你想要的图标，上面会提供对应的引入方式，你也可以在搜索框内用英文输入我们想搜索的内容：

Font Awesome提供了很多方便的使用技巧，比如说调整图标相对大小， 使用 fa-lg(33% 递增) , fa-2x, fa-3x, fa-4x, 或 fa-5x，我们只要在图标引用后面添加你想要的大小即可。

如果你想让图标动起来，那么可以使用 fa-spin 使任意图标旋转，还可以使用 fa-pulse 使其进行8方位旋转 ，相当的炫酷，最主要是操作简单方便又快捷，的确挺好用的。

还有很多很多其他方便的功能，有兴趣的可以自己查看官方案例  http://www.fontawesome.com.cn/examples/