最简单方便,加入head

方法1

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

加入head里
方法2
下载font-awesome上传在web中
在head里加载font-awesome.min.css

<link rel="stylesheet" href="路径自行修改/font-awesome/css/font-awesome.min.css">

其他方法
还有官网介绍的大神方法

gem 'font-awesome-less'
$ bundle
$ gem install font-awesome-less
……
@import "font-awesome-sprockets";
@import "font-awesome";

使用方法

<i class="fa fa-home"></i> fa-home
大小
<i class="fa fa-home fa-lg"></i> fa-lg
<i class="fa fa-home fa-2x"></i> fa-2x
<i class="fa fa-home fa-3x"></i> fa-3x
<i class="fa fa-home fa-4x"></i> fa-4x
<i class="fa fa-home fa-5x"></i> fa-5x

效果
fa-home
大小
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
设置图标在一个固定宽度内,主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>

链接写法

源码

<a href="about.html"><i class="fa fa-weixin"></i></a>

中文网;http://www.fontawesome.com.cn