Font Awesome：精心打造的 Twitter Boostrap 矢量字体图标

　　Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

 

 

　　主要特色：

• ✓  一种字体，249个图标，是网页操作的象形语言；
• ✓  纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
• ✓  无限缩放，矢量图标在任何尺寸下都一模一样；
• ✓  免费使用，包括商业和非商业项目；
• ✓  支持 Internet Explorer 7 浏览器；
• ✓  能够在 Retina 屏幕完美呈现；
• ✓  完全兼容 Twitter Boostrap 最新版本；
• ✓  对设计师友好，设计师能够轻松使用；
• ✓  和其它图标字体不同，兼容屏幕阅读器；

 

使用方法

　　使用 CSS：

1. 拷贝 Font Awesome 字体目录到项目中；
2. 拷贝 font-awesome.min.css 文件到项目中；
3. 修改 font-awesome.min.css 文件中的字体路径到正确的位置；
4. 在页面的 head 里引入 font-awesome.min.css 文件：

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

 

　　使用 LESS：

1. 拷贝 Font Awesome 字体目录到你的项目中；
2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
3. 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "font-awesome.less";
4. 编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径：

@FontAwesomePath:   "../font";

　　然后重新进行 LESS 编译就可以了。

 

Github     官方主页     猛击下载

 

　　如何 GitHub 无法访问，可能需要配置 hosts 才能访问：

207.97.227.239 github.com 
207.97.227.252 nodeload.github.com 
207.97.227.243 raw.github.com 
204.232.175.78 documentcloud.github.com

您可能感兴趣的相关文章

• 让人爱不释手的13套精美网页图标素材
• 分享25套非常漂亮的免费网页图标素材
• 网页素材大宝库：50套精美的图标素材
• 分享20个非常不错的 UI 图标素材资源
• 分享18套精美的苹果风格免费图标素材

 

本文链接：稀世珍宝：270款圆滑的Twitter Boostrap矢量图标

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

来源：https://www.cnblogs.com/lhb25/archive/2013/01/23/font-awesome-twitter-bootstrap-icons.html