最简单的方式：BootstrapCDN （由MaxCDN提供）
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的 <head> 部分
<link href="//netdnabootstrapcdncom/font-awesome/450/css/font-awesomemincss" rel="stylesheet">
简单方式之一：使用默认CSS
如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome 文件夹到您的项目中。
在HTML的 <head> 中引用font-awesomemincss。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesomemincss">
简单方式之二：LESS Ruby Gem
自行安装：$ gem install font-awesome-sass
进阶方式：自定义 LESS 或 SASS
将Font Awesome字体库下载到你的网站服务器中，在HTML的 <head> 中引用font-awesome，此时你就可以在任何地方以下面这种简单方式引用图标：
<i class="fa fa-camera-retro"></i>
还可以使用 fa-border 以及 pull-right 或 pull-left、fa-spin等指令制造出旋转、边框等特效。没有正确加载FontAwesome字体库。根据查询相关公开信息显示，使用this$print进行打印预览时，FontAwesome图标无法展示的原因是由于打印预览页面并没有正确加载FontAwesome字体库。可以在打印预览页面中手动引入FontAwesome字体库的CSS文件，以确保字体库得以正确加载。1、为什么我用webpack打包font-awesome，虽然页面没什么问题，但是控制台报错说找不到字体？
2、引入的地方：
import 'bootstrap/dist/css/bootstrapmincss';
import 'font-awesome/css/font-awesomecss';
3、我找到font-awesomecss:
@font-face {
font-family: 'FontAwesome';
src: url('/fonts/fontawesome-webfonteotv=463');
src: url('/fonts/fontawesome-webfonteot#iefix&v=463') format('embedded-opentype'), url('/fonts/fontawesome-webfontwoff2v=463') format('woff2'), url('/fonts/fontawesome-webfontwoffv=463') format('woff'), url('/fonts/fontawesome-webfontttfv=463') format('truetype'), url('/fonts/fontawesome-webfontsvgv=463#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
4、webpackconfigjs配置：
{
test: /\css$/,
loader: ExtractTextextract('style-loader', 'css-loader')
},
{
test: /\(png|gif|jpg|jpeg)$/,
loader: "urlname=img/[hash:8][ext]"
},
{
test: /\woff(\v=\d+\\d+\\d+)$/,
loader: 'urlname=font/[name][ext]&limit=10000&minetype=application/font-woff'
},
{
test: /\woff2(\v=\d+\\d+\\d+)$/,
loader: 'urlname=font/[name][ext]&limit=10&minetype=application/font-woff'
},Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。
下面仅记录应用步调：
1到官网高低载最新版本的Font Awesome
2解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesomecss和font-awesomemincss），fonts下有有5个，如下：
3在须要应用的html或者其它类型的页面中引入样式文件，如下：
4查看font-awesomecss文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：
＠font-face {
font-family: ""FontAwesome"";
src: url（""/fonts/fontawesome-webfonteot？v=410""）;
src: url（""/fonts/fontawesome-webfonteot？＃iefix&v=410""） format（""embedded-opentype""）， url（""/fonts/fontawesome-webfontwoff？v=410""） format（""woff""）， url（""/fonts/fontawesome-webfontttf？v=410""） format（""truetype""）， url（""/fonts/fontawesome-webfontsvg？v=410＃fontawesomeregular""） format（""svg""）;
font-weight: normal;
font-style: normal;
}
必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。
4最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：
Home
Library
Applications
Settings
别的，font awesome 和BootStrap连络可以达到更好的结果。如何才能将如此绝佳的Font Awesome Icons引用到自己的网页上呢？下面做详细介绍。
最简单的方式：BootstrapCDN （由MaxCDN提供）
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的 <head> 部分
<link href="//netdnabootstrapcdncom/font-awesome/450/css/font-awesomemincss" rel="stylesheet">
简单方式之一：使用默认CSS
如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome 文件夹到您的项目中。
在HTML的 <head> 中引用font-awesomemincss。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesomemincss">
简单方式之二：LESS Ruby Gem
自行安装：$ gem install font-awesome-sass
进阶方式：自定义 LESS 或 SASS
将Font Awesome字体库下载到你的网站服务器中，在HTML的 <head> 中引用font-awesome，此时你就可以在任何地方以下面这种简单方式引用图标：
<i class="fa fa-camera-retro"></i>
还可以使用 fa-border 以及 pull-right 或 pull-left、fa-spin等指令制造出旋转、边框等特效。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）