首页
前端开发
后端开发
数据库
数据分析
开发工具
测验/考试
代码笔记
🎁 作为国产 AI 大模型的佼佼者，全面、实用的 DeepSeek 教程 现已正式上线了点击参与
导航分类
主题
  • 默认模式
  • 浅蓝色模式
  • 淡红色模式
  • 深夜模式

什么是 Font Awesome 图标？

Font Awesome 是一款广受欢迎的图标字体库，常用于网页设计开发。

Font Awesome 拥有丰富的矢量图标集，借助 CSS 就能轻松调用。还支持对图标大小、颜色、阴影等样式的灵活定制。

Font Awesome 最初是 Dave Gandy 创建的开源项目，旨在提供一套灵活、易用、可扩展的图标集。

Font Awesome 历经多次版本迭代，目前主流版本为 Font Awesome 6、Font Awesome 5 和 Font Awesome 4。

所有版本可以参考：https://fontawesome.com/versions。

Font Awesome 图标引用

本站测试使用了 Font Awesome 4，图标列表：https://fontawesome.com/v4/icons/。

要使用 Font Awesome 图标，请在 HTML 页面的元数据<head>位置添加 Font Awesome 图标的 CSS 样式：

1、国内推荐 CDN：

<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">

2、海外推荐 CDN：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

3、直接下载到本地：

Download

注意： 在测试环境中，不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可，方便快捷。在生产环境中可以下载到本地，避免后期运营时，遇到不必要的麻烦。

Font Awesome 图标实例

接下来使用 Font Awesome 4.7.0 版本，来实例演示一下如何使用Font Awesome 图标。

您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <i class="fa fa-truck"></i>
    <i class="fa fa-truck" style="font-size:48px;"></i>
    <i class="fa fa-truck" style="font-size:65px;color:red;"></i>
</body>
</html>

点击 “运行代码” 按钮后，它的运行结果：

Font Awesome 设计为与内联元素一起使用。<i>和<span>元素广泛用于图标。

另外注意，如果更改图标容器的字体大小或颜色，图标会更改。

Font Awesome 图标大小

fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <i class="fa fa-truck fa-lg"></i>
    <i class="fa fa-truck fa-2x"></i>
    <i class="fa fa-truck fa-3x"></i>
    <i class="fa fa-truck fa-4x"></i>
    <i class="fa fa-truck fa-5x"></i>
</body>
</html>

点击 “运行代码” 按钮后，它的运行结果：

提示： 如果你的图标在顶部和底部被切断，请增加行高。

Font Awesome 列表图标

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-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

点击 “运行代码” 按钮后，它的运行结果：

  • List icons
  • List icons
  • List icons

Font Awesome 图标样式

fa-border，fa-pull-right 或 fa-pull-left 类用于拉式引用或文章图标。

实例代码 运行代码
复制
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！<br>
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！<br>
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！<br>
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！

点击 “运行代码” 按钮后，它的运行结果：

开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！
开创者教程 -- 编程学习平台，助你从零开始实现技术梦想！！

Font Awesome 动态图标

fa-spin 类可以让图标旋转, fa-pulse 类可以使图标以 8 步为周期进行旋转。

实例代码 运行代码
复制
<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>

点击 “运行代码” 按钮后，它的运行结果：

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

Font Awesome 图标倾斜角度

fa-rotate-* 和 fa-flip-* 类用于旋转和翻转图标。

实例代码 运行代码
复制
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>

点击 “运行代码” 按钮后，它的运行结果：

Font Awesome 图标堆叠

要堆叠多个图标，请使用父级上的 fa-stack 类，fa-stack-1x 类用于常规大小的图标，fa-stack-2x 用于较大的图标。

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

实例代码 运行代码
复制
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa - twitter on fa - circle - thin<br>

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

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

点击 “运行代码” 按钮后，它的运行结果：

fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera

Font Awesome 图标固定宽度

fa-fw 类用于设置固定宽度的图标。 当不同的图标宽度偏离对齐时，此类非常有用。 特别适用于Bootstrap的导航列表和列表组。

实例代码 运行代码
复制
<div class="list-group">
  <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
  <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
  <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
  <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>

点击 “运行代码” 按钮后，它的运行结果：

Home Library Applications Settings
评论区 0
发表评论
教程介绍
Font Awesome 一款功能强大的图标库和工具套件，满足网页设计中对图标字体的需求。
1 章节
176 阅读
0 评论
教程目录

Font Awesome 教程

Font Awesome 图标