好库网 好库网首页 | 我的好库
好饱的专栏

Font Awesome字体图标的使用方法

发布者:好饱
发布日期:2016/2/10 14:58:56   更新日期:2016/2/10 15:00:10
阅读次数:1436
评分:4.80
介绍:Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
正文:

将Font Awesome字体图标装进页面总共分两步:

第一步把冰箱门打开:引用样式 <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css">
第二步把图标装进去:用<i>标签显示图标

 

Font Awesome4.5特性:
一个字体文件, 605 个图标
一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。

 

不依赖JavaScript
因为不需要JavaScript所以有更好的兼容性

 

用CSS控制样式
用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。

 

无限缩放
矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。

 

个人、商业均可自由使用
Font Awesome是完全免费的,无论个人还是商业使用。

 

支持IE7+
Font Awesome支持IE7及以上浏览器。不过你要是必须用在这种过时的浏览器上话,我只能表示同情!
如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->

 

在Retina屏幕上也能完美呈现
Font Awesome 中包含的都是矢量图标,在高分辨率的显示器上也能完美呈现。

 

和其它框架完美配合
Font Awesome是完全从头设计的整套图标,完全和Bootstrap 等其它框架兼容.

 

兼容屏幕阅读器
Font Awesome 不会阻止屏幕阅读器,这和其他图标字体的行为方式完全不同。

 

图标样式

 

基本图标
<i class="fa fa-flag"></i> fa-flag

 

固定宽度图标
使用fa-fw,例如:
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

 

大图标(相对于容器大小,按33%增长):fa-lg,fa-2x,fa-3x,fa-4x,fa-5x
<i class="fa fa-coffee fa-lg">fa-coffee</i>
<i class="fa fa-coffee fa-2x">fa-coffee</i>


列表图标
使用fa-ul和fa-li,例如:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

 

边框和引号
使用fa-border 和 fa-pull-right(右引号)或 fa-pull-left(左引号)
例如:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>


旋转图标
使用fa-spin类旋转图标,使用class fa-pulse可以使图标以8步为周期进行旋转。可以完美执行旋转动画的图标有:fa-spinner,fa-refresh和fa-cog。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

 

堆叠图标
要将多个图标堆叠在一起,可以在父元素上使用class fa-stack,fa-stack-1x是正常的图标尺寸,fa-stack-2x是大尺寸的图标。fa-inverse可以反转图标的颜色。在父元素还可以使用fa-lg等图标尺寸来设置图标的尺寸。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera


在Bootstrap 3中使用
Font Awesome字体图标可以完美的和Bootstrap结合使用。
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.4.0</a>

<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>

 

一个稍完整的例子

<html>
<head>
<title>Font Awesome的使用方法</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css">
<div class="col-md-3 col-sm-4">
<div class="list-group">
  <a class="list-group-item" href="http://www.okbase.net" target="blank"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
</div>
<i class="fa fa-flag"></i> fa-flag
<i class="fa fa-coffee fa-lg">fa-coffee</i>
<i class="fa fa-coffee fa-2x">fa-coffee</i>
</body>
</html>

 

图标集:详见 http://fontawesome.io/icons/


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。