前言
fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 今天烽烟就来介绍下fontawesome图标的安装方法及使用方法。
Font Awesome特性
479个图标:只需一种字体,同时拥有多个图标 无需JavaScript:Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性 解决方案:可无限放大缩小,使用和普通字体一样自由便捷,可任意缩放 完全免费:完全免费,可以用于商业用途, SIL OFL 1.1 协议 CSS可控性:通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 完全兼容视网膜屏:由于fontawesome是矢量字体,可以完全兼容视网膜屏 良好兼容性:能和Bootstrap等常用UI框架一起使用,奥森(Font Awesome中文)兼容IE7+ 桌面应用:可以用于桌面应用中 兼容屏幕阅读器:不像其它字体那样, 它可以兼容屏幕阅读器。
安装
1.下载Font Awesome最新安装包。 2.在 <head> 标签 里, 引入 font-awesome.min.css.(具体路径是你的情况而定)
<linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css">
只需要这两步你就可以在主题中调用fontawesome图标了,对于使用烽烟主题的朋友可以忽略这部。
使用
引入fontawesome以后,你可以把<i>标签用在各个地方!
1.例如基本图标:复制以下代码到你的html里
<iclass="fafa-camera-retro"></i>fa-camera-retro
你可以通过css控制图标的font-size,color,阴影等
2.Larger Icons:你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or fa-5x 这些类等比缩放图标大小.
<iclass="fafa-camera-retrofa-lg"></i>fa-lg<iclass="fafa-camera-retrofa-2x"></i>fa-2x<iclass="fafa-camera-retrofa-3x"></i>fa-3x<iclass="fafa-camera-retrofa-4x"></i>fa-4x<iclass="fafa-camera-retrofa-5x"></i>fa-5x
如果发现图标上下有被隐藏的情况,你可以通过适当增加 line-height来解决.
3.固定宽度图标:使用 fa-fw可以固定图标宽度
<divclass="list-group"><aclass="list-group-item"href="#"><iclass="fafa-homefa-fw"></i> Home</a><aclass="list-group-item"href="#"><iclass="fafa-bookfa-fw"></i> Library</a><aclass="list-group-item"href="#"><iclass="fafa-pencilfa-fw"></i> Applications</a><aclass="list-group-item"href="#"><iclass="fafa-cogfa-fw"></i> Settings</a></div>
4.列表图标:使用 fa-ul and fa-li 如下
<ulclass="fa-ul"><li><iclass="fa-lifafa-check-square"></i>Listicons</li><li><iclass="fa-lifafa-check-square"></i>canbeused</li><li><iclass="fa-lifafa-spinnerfa-spin"></i>asbullets</li><li><iclass="fa-lifafa-square"></i>inlists</li></ul>
5.有边框 & 漂浮 图标:fa-border 和 pull-right 或者 pull-left 组合使用
<iclass="fafa-quote-leftfa-3xpull-leftfa-border"></i>...tomorrowwewillrunfaster,stretchoutourarmsfarther...Andthenonefinemorning—Sowebeaton,boatsagainstthecurrent,bornebackceaselesslyintothepast.
6.旋转图标:fa-spin 和 fa-spinner, fa-refresh, fa-cog组合
<iclass="fafa-spinnerfa-spin"></i><iclass="fafa-circle-o-notchfa-spin"></i><iclass="fafa-refreshfa-spin"></i><iclass="fafa-cogfa-spin"></i>
只支持IE10+7.翻转图标
<iclass="fafa-shield"></i>normal<br><iclass="fafa-shieldfa-rotate-90"></i>fa-rotate-90<br><iclass="fafa-shieldfa-rotate-180"></i>fa-rotate-180<br><iclass="fafa-shieldfa-rotate-270"></i>fa-rotate-270<br><iclass="fafa-shieldfa-flip-horizontal"></i>fa-flip-horizontal<br><iclass="fafa-shieldfa-flip-vertical"></i>icon-flip-vertical
8.叠加图标
<spanclass="fa-stackfa-lg"><iclass="fafa-square-ofa-stack-2x"></i><iclass="fafa-twitterfa-stack-1x"></i></span>fa-twitteronfa-square-o<br><spanclass="fa-stackfa-lg"><iclass="fafa-circlefa-stack-2x"></i><iclass="fafa-flagfa-stack-1xfa-inverse"></i></span>fa-flagonfa-circle<br><spanclass="fa-stackfa-lg"><iclass="fafa-squarefa-stack-2x"></i><iclass="fafa-terminalfa-stack-1xfa-inverse"></i></span>fa-terminalonfa-square<br><spanclass="fa-stackfa-lg"><iclass="fafa-camerafa-stack-1x"></i><iclass="fafa-banfa-stack-2xtext-danger"></i></span>fa-banonfa-camera