如何使用Font Awesome字体图标

文章目录

font-awesome

很多人都会搜索:如何在PS上使用Font Awesome字体到这个博客,也许你们想搜索的并不是如何在Photoshop上使用fontawesome,而是如何将font-awesome应用到自己的前端开发项目中。

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。

Font Awesome 特性

  1. 一个字体文件, 369 个图标。
  2. 不需要javascript要求:更快的载入速度
  3. 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
  4. 自由免费:你可以将它应用到你的商业中。
  5. CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
  6. 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
  7. 为BootStrap而生:完全的兼容BootStrap新版3.0
  8. 桌面友好:你可以查看字体的样式列表
  9. 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

  1. 你只需要到:http://fontawesome.io 下载压缩包然后解压到你的项目中。
  2. 在你的html头部的head里面添加对相应的font-awesome的样式。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. 根据这里的案例开始你的项目。
  4. 如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
    <![endif]-->

原文链接:如何使用Font Awesome字体图标 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/font-awesome.html)

发表评论

请登录后发表评论:

19 Responses to “如何使用Font Awesome字体图标”

  1. Un丶ique

    在tomcat部署环境下,IE 8 font-awesome显示不了, 火狐是正常的

    登录回复
    • 前端博客

      IE8某些情况可能会出现问题吧。
      http://getbootstrap.com/getting-started/#support-ie8-font-face

      IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

      登录回复
  2. 你后面的女生

    为什么每次点击<a>标签里的内容页面里所示图标会抖动一下呢(只有火狐不抖动)

    登录回复
  3. 路径问题到底怎么解决

    我引用了这个文件,但是还是出现不了图标,不知道问题出在哪?能否加qq指点一二

    登录回复
  4. 链接通知 : 如何在PS上使用Font Awesome字体 — 好JSER
  5. Promote Myself

    阿斯顿发生的发生短发

    登录回复
  6. 前端博客

    测试Wordpress正常评论显示。

    登录回复
  7. bingo

    在tomcat部署环境下,font-awesome显示不了,楼主知道怎么解决么,谢谢了!

    登录回复
    • 前端博客

      跟环境无关,请检查字体路径及其代码调用是否正确。如果你可以将地址发给我看,也许我能够帮你看看问题。

      登录回复
  8. 不知子曰

    求补充ie6兼容

    登录回复
  9. 路人甲

    真蛋疼,还要评论,不先看,怎么一下评论!!

    登录回复
    • 前端博客

      说实话,作为一个无盈利的个人博客,被人采集内容是很无奈的。请给点支持和鼓励一下行吗?还有,发表评论时可否用一下真实网名。

      登录回复
  10. 懒汉脏脏

    项目组正在使用这个字体 文章很吸引人啊

    登录回复
  11. 懒汉脏脏

    很好的一篇文章

    登录回复