• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
孙龙 程序员
少时总觉为人易,华年方知立业难
博客园    首页    新随笔    联系   管理    订阅  订阅
Font Awesome:图标字体,完全CSS控制

Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter、facebook等等。用户可以自定义这些图标字体,包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。它有以下的优点:

1、像矢量图形一样,可以无限放大
2、只需一种字体,同时拥有多个图标,目前支持439个图标
3、无需考虑兼容性问题,fontawesome不依赖于javascript
4、通过CSS可以任意控制所有图标的大小 ,颜色,阴影。
5、由于fontawesome是矢量字体,可以完全兼容视网膜屏
6、能和Bootstrap等常用UI框架一起使用,良好兼容性
7、可以用于桌面应用中
8、不像其它字体那样, 它可以兼容屏幕阅读器。
它的缺点是:

1、对IE6等浏览器兼容性不是很好,不过最新版本的Font Awesome和IE7完美兼容
2、要想用fontawesome,需要引入相关的字体文件,增加了网页大小

 

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
#这里显示的是Google plus和twitter的图标
<i></i> \f0d4
<i></i> \f081

#这里显示两个图标合并的样式
<span>
  <i></i>
  <i></i>
</span>
 

本文来自博客园,作者:孙龙-程序员,转载请注明原文链接:https://www.cnblogs.com/sunlong88/articles/8681341.html

posted on 2018-03-31 11:05  孙龙-程序员  阅读(187)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3