您的位置：首页 > 其它

Font Awesome 4.0.3 字体图标完美兼容IE7

2014-10-23 11:06 791 查看

1、下载FontAwesome4.0.3兼容包，http://www.thinkcmf.com/index.php?m=font

2、解压，并放到自己网站系统合适的位置（如果你的站已使用FontAwesome4.0.3，只需拷出当中font-awesome-ie7.css）

3、引用代码

<linkhref="./css/font-awesome.css"rel="stylesheet"type="text/css">

基本图标

<iclass="fafa-camera-retro"></i>fa-camera-retro

LargerIcons

你可以使用

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

[/code]

固定宽度图标

使用

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>

列表图标

使用

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>

有边框&漂浮图标

fa-border

和

pull-right

或者

pull-left

组合使用

<iclass="fafa-quote-leftfa-3xpull-leftfa-border"></i>
...tomorrowwewillrunfaster,stretchoutourarmsfarther...
Andthenonefinemorning—Sowebeaton,boatsagainstthe
current,bornebackceaselesslyintothepast.

旋转图标

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>

翻转图标

<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

叠加图标

<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

参考地址：http://www.thinkcmf.com/font/examples[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航