使用Font-Awesome图标字体库_icon fa

方法一，在vue +Element 的项目中直接安装、使用Font-Awesome图标字体库：

1、 安装font-awesome：
2、在main.js中引入：
import ‘font-awesome/css/font-awesome.css’

3. 在组件中使用

.<template>
	<div>
		微信：<span class="fa fa-wechat "></span> 
	</div>
</template>
1
2
3
4
5

也可以直接引入，在组件中使用的方法不变。
上述两步（安装和引入），换成一步：在vue项目点的public文件夹下的index.html中引入font-awesome的地址，便可直接在组件中使用，使用方法和上面一致，参考官网。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
1

方法二，将Font-Awesome字体图标整合到Element中：

Element-ui中使用font-awesome的icon：

1. 安装，font-awesome （也可在index.html中直接引入font-awesome，参考官网http://fontawesome.dashgame.com/）
2. 在assets的直接目录下,新建style.less
   style.less:

[class^='el-icon-fa'],[class*=' el-icon-fa']{
    display: inline-block;
    font:normal normal normal 20px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    webkit-font-smoothing:antialiased;
    -moz-osx-font-smoonthing:grayscale;

};
@import url("../../node_modules/font-awesome/less/font-awesome");
@fa-css-prefix:el-icon-fa;
1
2
3
4
5
6
7
8
9
10
11

这里项目可能会提醒你安装less-loader,如图示报错:

安装less-loader 和 less:

3. 在main.js中引入style.less和font-awesome的样式：

//引入font-awesome，将Awesome字体整合到Element中
import “font-awesome/css/font-awesome.css”;
import “./assets/style.less”;

4.在页面中使用：
camera-retro 是Font Awesome里的一个相机的图标名称，如图：

//***此时可用，el-icon-fa-图标名  使用font-awesome中的图标；也支持font-awesome原来的使用方法，注意，这里字体在style.less做了限制；  
<template>
  <div class="home">
相机：<i class="el-icon-fa-camera-retro" style="margin-right:20px;"> </i>
用户：<i class="el-icon-fa-user" style="margin-right:20px;"></i>
微信：<span class="fa fa-wechat "></span>
  </div>
</template>
1
2
3
4
5
6
7
8