您的位置：首页 > 其它

Font Awesome 字体符号的使用

2015-12-02 11:24 405 查看
参考官网 点击打开链接

拷贝 Font Awesome 字体目录到你的项目中。
font-awesome.min.css 文件到你的项目中。
打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。（字体路径是相对于你的 CSS 目录的。）
在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="bootstrap.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，

可以控制大小，通过应用 icon-large (增大 33%), icon-2x, icon-3x 或 icon-4x 样式让图标变得更大。

运行效果截图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航