Font Awesome
2017-04-17 16:38
316 查看
参考
http://www.fengyan.cc/173.htmlhttp://www.bootcss.com/p/font-awesome/
简介
Font Awesome是一套图标字体库和CSS框架,提供了丰富的矢量字体图标,不依赖JS,通过CSS可以控制所有图标的大小、颜色和阴影,可以Bootstrap等框架一起使用,Font Awesome中文兼容IE7+,完全免费。官网在这里。
引入
在html的文档部分在 标签 里, 引入 font-awesome.min.css,可以将字体下载到本地,也可以使用国内的CDN来引用。百度静态资源公共库、BootCDN都提供了Font Awesome的镜像,可以放心使用。
使用
1 使用i标签引用Font Awesome提供的各种矢量图标<i class="fa fa-camera-retro"></i> fa-camera-retro
可以通过CSS控制图标的fong-size、color、引用等。
2 可以为i增加类fa-lg,fa-2x,fa-3x,fa-4x,fa-5x来等比付缩放图标大小,因为是矢量图标,所以不会失真
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
3 固定宽度图标:使用 fa-fw可以固定图标宽度
4 可以在列表中使用图标
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-spinner"></i>as bullets</li> <li><i class="fa-li fa fa-group"></i>as bullets</li> </ul>
5 使用fa-border为图标增加边框,使用pull-right 或者 pull-left 将图标置左或置右
<i class="fa fa-group fa-3x pull-right fa-border animated"></i>
6 旋转图标:fa-spin可以使图标旋转,fa-spinner、fa-refresh,、fa-cog是几个比较适合转起来的图标
<i class="fa fa-spinner fa-3x fa-spin"></i> <i class="fa fa-refresh fa-3x fa-spin"></i> <i class="fa fa-cog fa-3x fa-spin"></i>
注意:旋转图标只支持IE10+
7 翻转图标,增加fa-rotate-90可以让图标旋转90°、180°和270°,fa-flip-horizontal和fa-flip-vertical可以让图标水平或垂直翻转
<i class="fa fa-shield"></i> normal<br> <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
8 叠加图标:需要先给完成容器一个fa-stack和控制整体大小的class,比如fa-4x
然后在里面两个相互叠加的i标签增加fa-stack-1x或fa-stack-2x的class
<span class="fa-stack fa-2x"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span>
相关文章推荐
- [Extjs6] 随记--如何修改font awesome图标的样式
- AngularJs+BootStarp+fontAwesome打造个人展示页面
- Font Awesome:图标字体,完全CSS控制
- Font Awesome:图标字体,完全CSS控制
- 利用PhotoShop将Font-Awesome转为图片格式
- font-awesome 图标无法显示
- Font Awesome可缩放的矢量图标
- Eclipse validation error with fontawesome-webfont.svg
- VS2013下fontawesome-webfont.woff路径下有还报404错配置web.config方法
- 如何在angular2中引用FontAwesome字体中的图标?
- fontawesome 助手
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- Font Awesome-为Bootstrap设计的图标字体
- Android调用font-awesome字体图标
- springmvc+font-awesome开发出的页面显示方框乱码的解决方法
- html自定义垂直导航菜单(多级导航菜单,去掉font-awesome图标,添加自己的箭头图标)
- 关于EasyUI和Font Awesome 整合的小发现
- Eclipse validation error with fontawesome-webfont.svg
- http://www.bootcss.com/p/font-awesome/design.html
- 图标元素库FontAwesome