参考官网 点击打开链接
- 拷贝 Font Awesome 字体目录到你的项目中。
- font-awesome.min.css 文件到你的项目中。
- 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。（字体路径是相对于你的 CSS 目录的。）
- 在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="awesome/css/font-awesome.min.css">
在浏览器中打开页面，检查是否正确启用了 Font Awesome!
下载地址点击打开链接
文件结构如上图
bootstrap.min.css与html文件同目录
font-awesome.min.css在 awesome/css/ 下
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="awesome/css/font-awesome.min.css">
<style type="text/css">
.virtral-class:before {
color: #0F9C35;
content: "\f00c";
font-family: FontAwesome;
margin: 3px;
font-size: xx-large;
}
</style>
</head>
<body>
<div><i class="icon-ok-sign icon-2x"></i></div>
<div>
<ul>
<li><i class="icon-ok"></i>123@163.com</li>
<li><i class="icon-ok"></i>456@163.com</li>
<li><i class="icon-ok"></i>123@163.com</li>
<li><i class="virtral-class"></i>通过伪类添加字体的形式</li>
</ul>
</div>
</body>
</html>可以通过以上两种方式添加Font Awesome。
- 通过类名的形式， icon-ok-sign icon-2x
- 通过伪类在css中添加 .virtral-class:before，
运行效果截图
扫一扫
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
