辅助bootstrap的一个Font Awesome,快来围观吧——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
辅助bootstrap的一个Font Awesome,快来围观吧

发布作者:萧强   发布时间:2014-01-03   阅读次数:10668

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 文件:
        href="../css/bootstrap.min.css">
     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 变量为字体路径:

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

 

  如何 GitHub 无法访问,可能需要配置 hosts 才能访问:


常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

Bootstrap响应式设计

热点文章

新闻资讯

标签云

友情赞助