Bootstrap Font Awesome图标及css命名方法

Font Awesome字体专为bootstrap前端框架而生。Font Awesome字体的特点如下文所示;如何简单快速的修改Bootstrap的图标?只需要用css样式控制就可以!

bootstrap Font Awesome 3.0 字体文件

1、目前有249个图标,提供了深灰色(默认)和白色两种图标风格

一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。

2、用CSS控制样式

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

3、无限缩放

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

4、个人、商业均可自由使用

Font Awesome是完全免费的,无论个人还是商业使用。

5、支持IE7+

Font Awesome支持IE7及以上浏览器。

6、在Retina屏幕上也能完美呈现

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

7、专为Bootstrap设计

Font Awesome是完全从头设计的整套图标,完全和Bootstrap 2.2.2版本兼容

8、设计师的助手

安装 FontAwesome.otf 字体文件,然后在这个页面直接拷贝粘贴图标字符的代码就可以用于你的设计中了。

9、兼容屏幕阅读器

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

 

bootstrap图标对应的HTML DOM


  1. <!--图标引用class--> 
  2. <i class="icon-edit"></i> 
  3. <i class="icon-edit icon-ok"></i> 

bootstrap图标对应的className:

bootstrap图标的css命名
 
 

说明:以上只是部分图标(3.0版本新增了40个图标),完整的图标请访问:http://www.bootcss.com/p/font-awesome/

相关阅读:bootstrap图标不显示:跨源请求失败、资源访问受限

 

 

相关经验

导读书签
书签初始化中…