2015-07-18 19:41:17

font awesome使用教程

作者:leo

分类:网页设计 | 统计: 0评/1668阅
专辑:Font Awesome

Font Awesome是一套制作精美的web矢量图标,共有249个图标文件,几乎囊括所有的常用web图标。Font Awesome用纯css控制图片的大小,颜色,阴影,非常方便的修改。Font Awesome可以无限缩放,意味着每个图标都能在所有大小的屏幕上完美呈现。Font AwesomeRetina屏幕上也能完美呈现。Font Awesome向下兼容到IE7。

Font Awesome的使用方法非常简单,有以下事项(以Font-Awesome-3.2.1为例)

一、基本图标

<i class="icon-3x  icon-folder-close"></i>

icon-nx来控制图标大小,icon-folder-close控制图标样式,通过控制a标签的颜色来控制图标的颜色。

二、等宽图标

<div class="list-group">
	<a class="list-group-item" href="#">
    <i class="icon-home fa-fw"></i>&nbsp; Home</a>
    <a href="#"><i class="icon-book fa-fw"></i>&nbsp; book</a>
    <a href="#"><i class="icon-pencil fa-fw"></i>&nbsp; Applications</a>
</div>

通过fa-fw来控制

三、旋转图标

<i class="icon-3x icon-spin icon-spinner"></i>

通过icon-spin来控制图标旋转

四、兼容ie7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-awesome-ie7.min.css">
<![endif]-->

通过使用Font Awesome使得前端图标实现变得非常简单,快捷。


上一篇: 已是第一篇

下一篇: Linux下安装PHP扩展

评论(0)

评论 还可以输入2000个字符
验证码:

成为设计牛人
从分享设计开始

上传素材