快捷搜索:  汽车  科技

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架Font Awesome完全免费,哪怕是商业用途。请查看许可。 如言语一般自由Font Awesome完全不依赖JavaScript,因此无需担心兼容性。 无限缩放无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(1)

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

一个字库,675个图标

仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。

无需依赖JavaScript

Font Awesome完全不依赖JavaScript,因此无需担心兼容性。

无限缩放

无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。

如言语一般自由

Font Awesome完全免费,哪怕是商业用途。请查看许可。

CSS控制

只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。

高分屏完美呈现

您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span> 才能更加语义化。

<i class="fa fa-camera-retro"></i> fa-camera-retro

如果您修改了图标容器的字体大小,图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(2)

使用 fa-lg (33%递增)、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

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(3)

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。

<div class="list-group">

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

<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>

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

<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>

</div>

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(4)

使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。

<ul class="fa-ul">

<li><i class="fa-li fa fa-check-square"></i>List icons</li>

<li><i class="fa-li fa fa-check-square"></i>can be used</li>

<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>

<li><i class="fa-li fa fa-square"></i>in lists</li>

</ul>

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(5)

使用 fa-spin 类来使任意图标旋转,现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-spinner fa-pulse"></i>

font标签的字体,FontAwesome一套绝佳的图标字体库和CSS框架(6)

官方下载地址:http://fontawesome.dashgame.com/

猜您喜欢: