CSS3在html页面中使用Font Awesome字体图标的方法-百分百源码网

CSS3在html页面中使用Font Awesome字体图标的方法

发布时间：01/15 来源：浏览：关键词：

下面我们一起来看一篇关于CSS3在html页面中使用Font Awesome字体图标的方法的例子，希望能够让各位更深入的理解css中字体的一些应用例子。

一，什么是字体图标

（1）现在比较流行使用字体图标，所谓字体图标其实就是一个包含许多图标的字体库。同我们常用的字体一样，这个也可以理解为一种特殊字体，只不过里面包含的都是图标。
（2）既然是字体，那么最方便的就是可以随意在代码中更改颜色和大小而不会失真。这样不需要因为要适配各种尺寸而制作多个图片，或者做多套颜色的图标用来标识不同状态。
（3）无论是按钮图标还是导航栏图标，也不管是网站开发还是移动应用开发，字体图标都能适用。
（比如下面几个就可以使用字体图标实现，像 111cn.net 右侧导航栏上的小图标用的也是字体图标）

二，Font Awesome 图标字体库
Font Awesome 是一套目前最受欢迎最全面的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标和社交网络图标、Web 应用程序图标和编辑器图标等等。

网站地址：官网地址 GitHub地址

主要特色如下：

✓ 一种字体，包含605个图标（截至4.5.0版本）；
✓ 纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
✓ 无限缩放，矢量图标在任何尺寸下都一模一样；
✓ 免费使用，包括商业和非商业项目；
✓ 支持 Internet Explorer 7 浏览器；
✓ 能够在 Retina 屏幕完美呈现；
✓ 简单，易用；
✓ 对设计师友好，设计师能够轻松使用；
✓ 和其它图标字体不同，兼容屏幕阅读器；

下面只是字体库中一小部分图标（点击此处查看全部）：

三，Font Awesome的配置
（1）首先将整个字体库文件夹 font-awesome 放到工程项目中。
（2）在html页面的头部把 font-awesome.min.css 引进来。
1
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

四，Font Awesome的使用样例
在页面中的任何地方都可以使用 标签来使用Font Awesome字体图标。

1，最简单的样例

通过在class中使用 fa 前缀以及图标名字，可以显示出相应的图标（内联样式）

fa-camera-retro

2，相对于内容大小，放大图标尺寸

使用fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 样式可以让图标相对于内容，尺寸增大33%，变成2倍，3倍，4倍，5倍。

fa-lg 
 fa-2x 
 fa-3x 
 fa-4x 
 fa-5x 
（注意：如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height 来解决）

3，固定宽度图标

使用 fa-fw 可以固定图标宽度

<!doctype html>
<html lang="en">
 <head>
 <title>111cn.net</title>
 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
 <style>
 .list-group {
 margin-bottom: 20px;
 padding-left: 0;
 }

 .list-group-item {
 position: relative;
 display: block;
 padding: 10px 15px;
 margin-bottom: -1px;
 background-color: #ffffff;
 border: 1px solid #dddddd;
 }

 .list-group-item:first-child {
 border-top-right-radius: 4px;
 border-top-left-radius: 4px;
 }

 .list-group-item:last-child {
 margin-bottom: 0;
 border-bottom-right-radius: 4px;
 border-bottom-left-radius: 4px;
 }

 a.list-group-item {
 text-decoration: none;
 color: #555555;
 }

 a.list-group-item:hover,
 a.list-group-item:focus {
 text-decoration: none;
 color: #555555;
 background-color: #f5f5f5;
 }
 </style>
</head>
<body>
 <div class="list-group">
 <a class="list-group-item" href="#">  Home</a>
 <a class="list-group-item" href="#">  Library</a>
 <a class="list-group-item" href="#">  Applications</a>
 <a class="list-group-item" href="#">  Settings</a>
 </div>
</body>
</html>

4，列表图标

使用 fa-ul 和 fa-li 可以很方便地替换list列表默认图标。

<ul class="fa-ul">
<li>List icons</li>
<li>can be used</li>
<li>as bullets</li>
<li>in lists</li>
</ul>

5，有边框且漂浮的图标

使用 fa-border 与 fa-pull-right 或者 fa-pull-left 组合使用，可以很方便地实现引用或文章图标。

...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

6，图标旋转动画

使用 fa-spin 可以让图标匀速旋转，使用 fa-pulse 可以让图标只按8个角度旋转。

（注意：如果是IE浏览器，只支持 IE10 以及以上版本的IE）

7，旋转、翻转图标

使用 fa-rotate-* 和 fa-flip-* 可以分别实现图标的旋转和翻转。

normal 
 fa-rotate-90 
 fa-rotate-180 
 fa-rotate-270 
 fa-flip-horizontal 
 fa-flip-vertical

8，叠加图标

要叠加多个图标，使用 fa-stack 设置容器。fa-stack-1x 表示正常大小的图标，fa-stack-2x 表示更大的图标。 fa-inverse 可以让图标反色。

fa-twitter on fa-square-o 




fa-flag on fa-circle 




fa-terminal on fa-square