Icons 字体图标教程

Icons 字体图标简介 Icons 字体图标大全

Font Awesome 5

Font Awesome 5 图标简介 Icons 辅助 Icons 警报 Icons 动物 Icons 箭头 Icons 音频和视频 Icons 汽车 Icons 秋季 Icons 饮料 Icons 品牌 Icons 建筑 Icons 商业 Icons 野营 Icons 慈善 Icons 聊天 Icons 国际象棋 Icons 儿童 Icons 服装 Icons 代码 Icons 通讯 Icons 电脑 Icons 建造工具 Icons 货币 Icons 日期和时间 Icons 设计 Icons 编辑器 Icons 教育 Icons 表情 Icons 能源 Icons 文件 Icons 金融 Icons 健身 Icons 食物 Icons 水果和蔬菜 Icons 游戏 Icons 性别 Icons 万圣节 Icons 手势 Icons 健康 Icons 节日 Icons 酒店 Icons 家居 Icons 图像 Icons 界面 Icons 物流 Icons 地图 Icons 航海 Icons 营销 Icons 数学 Icons 医学 Icons 视频 Icons 音乐 Icons 对象 Icons 支付和购物 Icons 药房 Icons 政治 Icons 宗教 Icons 科学 Icons 科幻 Icons 安全 Icons 形状 Icons 购物 Icons 社交 Icons 旋转 Icons 体育 Icons 春季 Icons 状态 Icons 夏季 Icons 桌面游戏 Icons 切换 Icons 旅行 Icons 用户和人物 Icons 车辆 Icons 天气 Icons 冬季 Icons 书写

Font Awesome 4

Font Awesome 图标简介 Icons 品牌 Icons 图表 Icons 货币 Icons 方向 Icons 文件类型 Icons 表单 Icons 性别 Icons 手势 Icons 医疗 Icons 支付 Icons 加载中 Icons 文本 Icons 交通工具 Icons 视频播放 Icons Web 程序

Bootstrap 图标

Icons BS 字体图标

Google 图标

Google 字体图标简介 Icons 动作 Icons 警报 Icons AV Icons 通讯 Icons 内容 Icons 设备 Icons 编辑器 Icons 文件 Icons 硬件 Icons 图像 Icons 地图 Icons 导航 Icons 通知 Icons 放置 Icons 社交 Icons 切换



Font Awesome 5 简介

Font Awesome 5

Font Awesome 5 的专业版有7842个图标,免费版有1588个图标。本教程将重点介绍免费版。

要使用免费的Font Awesome 5 图标,您可以选择下载Font Awesome库,或者在Font Awesome注册一个帐户,并获得一个代码(称为KIT CODE),以便在将Font Awesome添加到网页时使用。

我们更喜欢KIT CODE代码方法。获得代码后,只需包含一行HTML代码,即可开始在网页上使用Font Awesome:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

实例

我们得到了代码 a076d05399 ,通过插入脚本标记,我们可以开始使用Font Awesome:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<i class="fas fa-clock"></i>

</body>
</html>

结果:

亲自试一试 »

注释: 无需下载或安装!


获取自己的 KIT CODE

注册并在以下网站免费获取您自己的代码:

fontawesome.com

Font Awesome 5 中的新功能

Font Awesome 5 中的新功能是 fas 前缀,Font Awesome 4 使用 fa

fas 中的 s 代表 solid,一些图标也有常规模式,使用前缀 far 指定:

实例

<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>

结果:

亲自试一试 »

Font Awesome 是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span> 才能更加语义化。

还请注意,如果更改图标容器的字体大小或颜色,图标也会更改。同样的事情也适用于阴影,以及任何使用 CSS 继承的东西。

实例

<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>

结果:

亲自试一试 »


图标大小

使用 fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x 类用于调整相对于其容器的图标大小。

实例

实例代码:

<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>

结果:

亲自试一试 »

列表图标

使用 fa-ulfa-li 类用于替换无序列表中的默认项目符号。

实例

实例代码:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>

结果:

亲自试一试 »

动态图标

使用 fa-spin 类来使任意图标旋转, 使用 fa-pulse 来使其进行8方位旋转。

实例

实例代码:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>

结果:

亲自试一试 »

注释: IE8 和 IE9 不支持 CSS3 动画。


旋转与翻转的图标

使用 fa-rotate-*fa-flip-* 类可以对图标进行任意旋转和翻转。

实例

实例代码:

<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>

结果:

亲自试一试 »

组合使用图标

如果想要将多个图标组合起来,使用 fa-stack 类作为父容器, fa-stack-1x 作为正常比例的图标, fa-stack-2x 作为大一些的图标。

还可以使用 fa-inverse 类可以用作替代图标颜色。您还可以向父级添加更大的图标类,以进一步控制尺寸。

实例

实例代码:

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>

<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>

<span class="fa-stack fa-lg">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera

结果:

亲自试一试 »

固定宽度图标

就像字母和其他字符一样,图标可以有不同的宽度,如果需要垂直对齐列表或菜单中的图标,这可能是个问题。

使用 fa-fw 类可以将图标设置为一个固定宽度。

实例

<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>

<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>

结果:


亲自试一试 »

边框与对齐图标

使用 fa-border, fa-pull-rightfa-pull-left 类可以轻易构造出引用的特殊效果。

实例

实例代码:

<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

结果:

亲自试一试 »