图标

使用多个流行图标库为你的内容添加视觉元素。

可用图标库

图标库	前缀	图标数量
Font Awesome	fa-	2000+
Material Icons	material-icons	2500+
Remix Icon	ri-	2400+
Bootstrap Icons	bi-	2000+
Ionicons	ion-	1300+

Font Awesome

实心图标

<i class="fas fa-home"></i>
<i class="fas fa-star"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-user"></i>

常规图标

<i class="far fa-star"></i>
<i class="far fa-heart"></i>
<i class="far fa-comment"></i>

品牌图标

<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>

Material Icons

<span class="material-icons">home</span>
<span class="material-icons">favorite</span>
<span class="material-icons">settings</span>

home favorite settings

轮廓风格

<span class="material-icons-outlined">home</span>
<span class="material-icons-outlined">favorite</span>

home favorite

圆角风格

<span class="material-icons-round">home</span>
<span class="material-icons-round">favorite</span>

home favorite

Remix Icon

<i class="ri-home-line"></i>
<i class="ri-home-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-fill"></i>

常用图标

<i class="ri-github-fill"></i>
<i class="ri-twitter-fill"></i>
<i class="ri-code-line"></i>
<i class="ri-terminal-box-line"></i>

Bootstrap Icons

<i class="bi bi-house"></i>
<i class="bi bi-star"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-github"></i>

Ionicons

<ion-icon name="home"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="heart"></ion-icon>

尺寸

Font Awesome

<i class="fas fa-star fa-xs"></i>
<i class="fas fa-star fa-sm"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-3x"></i>

CSS 尺寸

<i class="ri-star-fill" style="font-size: 24px;"></i>
<i class="ri-star-fill" style="font-size: 32px;"></i>

颜色

<i class="fas fa-star" style="color: gold;"></i>
<i class="fas fa-heart" style="color: red;"></i>
<i class="fas fa-leaf" style="color: green;"></i>

动画

Font Awesome

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

常见用例

在文本中使用

将图标与文本内联使用：

<i class="fas fa-check" style="color: green;"></i> 任务已完成

<i class="fas fa-times" style="color: red;"></i> 任务失败

<i class="fas fa-info-circle" style="color: blue;"></i> 信息

任务已完成

任务失败

信息

在列表中使用

- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 A
- <i class="ri-checkbox-circle-fill" style="color: green;"></i> 功能 B
- <i class="ri-close-circle-fill" style="color: red;"></i> 不支持

• 功能 A
• 功能 B
• 不支持

图标搜索

在这些网站查找图标：

• Font Awesome
• Material Icons
• Remix Icon
• Bootstrap Icons
• Ionicons

---

下一步：幻灯片 创建交互式演示文稿。

或继续阅读 配置 自定义你的博客。