CSS 图标 — 使用图标字体

Font Awesome/Bootstrap Icons/Material Icons 集成 · 难度：入门 · +15XP

CSS 图标 — 让网页更生动

图标让网页更直观。不需要图片——用图标字体库，一个 CSS 链接就能用上千个矢量图标。

方案 1: Font Awesome（最流行）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-brands fa-github"></i>

方案 2: Bootstrap Icons

<i class="bi bi-star-fill"></i>
<i class="bi bi-heart"></i>

自定义图标样式

.icon-large { font-size: 48px; color: #2196F3; }
.icon-spin { animation: spin 2s linear infinite; }
@keyframes spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }