文章目录

Font Awesome 是一套icon图标的字体,在开发的时候我们需要用到很多图标,比如返回,菜单按钮等都需要图标。平常我们都是使用png图片来制作,但是png需要二外的请求去加载,制作起来也麻烦,适配大分辨率还需要单独设计高分别率。但是有了font awesome,我们引入该字体就可以使用文字的方式来代替图标

fontawesome 网站http://fontawesome.io/

最新的版本已经不支持IE7了,如果需要做支持可以使用3.2.1及之前的版本

最新版本的font awesome实现了大量常用图标,具体可以在官网文档中查看

用法也相当简单
你可以使用font awesome自带的css,里面有一套class供使用。如果是ie7需要引入i7专用的css。

1
<i class="icon-lightbulb"></i>

如果你只想使用字体,不想使用它的css,因为你可能只是用的一两个图标,如果使用它的CSS就有很多冗余无用的代码,那么我们也可以自己在CSS来加以下代码。

1
2
3
4
5
6
7
8
9
10
.icon-lightbulb{
font-family: FontAwesome;
font-style:normal;
font-size:30px;
color:blue
}

.icon-lightbulb:before{
content:"\f0eb";
speak:none;
}

效果预览:

content 对应的是图标,实际上也就是每个图标字的UNICODE编码。每个图标都有一个对应的编码,可以到官方查看

此文是本站原创,转载请标注作者和链接出处!