fa-cog css,柴少鹏的官方网站

一、介绍Font-Awesome

1.1 介绍

Font Awesome 字体提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

1.2 加入文件

最简单的方式：CDN(由BootCDN提供)

将Font Awesome加入网页中。完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的

部分.

下载文件，使用默认CSS

如果使用了默认的Bootstrap CSS样式，那么可以使用这种方式来引入默认的Font Awesome CSS样式。

#前期是将font-awesome压缩包下载到指定目录并解压

1.3 优缺点#优势

目前图标总数共有五六百个;

不依赖Javascript

矢量图形,无限缩放

免费,可用于商业

CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果

支持retina显示(苹果retina 屏幕)

源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架

兼容屏幕阅读器

图标用到的animation适用于IE8~9

#缺点

不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)

二、Font-Awesome使用

2.1 先来使用一个Web Fonts的图标

Title

2.2 再来个喇叭小图标

#上面是浏览器页面效果。

2.3 做一个用户登录后的管理页面html>

Title

body{

margin: 0;

}

.right{

float: right;

}

.left{

float: left;

}

.pg-header{

height: 48px;

background-color: #2459a2;

color: white;

line-height: 48px;

}

.pg-header .logo{

width: 200px;

background-color: cadetblue;

text-align: center;

}

.pg-header .icon{

padding: 10px 20px;

}

.pg-header .icon:hover{

background-color: green;

}

.pg-header .user{

width: 60px;

padding: 0 20px;

color: wheat;

height: 48px;

}

.pg-header .user .a img{

height: 40px;

width: 48px;

margin-top: 4px;

border-radius: 50%;

/*border-radius:会把边框变成圆框后面跟百分比*/

}

.pg-header .user .b{

z-index: 20;

position: absolute;

top:48px;

right: 44px;

background-color: red;

width: 160px;

color: black;

display: none;

}

.pg-header .user:hover .b{

background-color: red;

display: block;

}

.pg-header .user .b a:hover {

background-color: blue;

}

.pg-header .user .b a{

display: block;

}

.pg-content .menu{

position: absolute;

top:48px;

left: 0;

bottom: 0;

width: 200px;

background-color: #dddddd;

}

.pg-content .content{

position: absolute;

top:48px;

right: 0;

bottom: 0;

left: 200px;

overflow: auto;

background-color: green;

}

测试

               

我的资料

注销

 5

a

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd