Font Awesome图标

--
--
--
1. 引入Font Awesome

在HTML文件的<head>标签中添加以下代码：

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
2. 使用图标

点击下方图标即可复制对应的HTML代码，直接粘贴到您的网页中使用。

示例：

  • 基础图标：<i class="fas fa-home"></i>
  • 品牌图标：<i class="fab fa-github"></i>

常见类型：

  • fas - 实心图标 (Font Awesome Solid)
  • far - 空心图标 (Font Awesome Regular)
  • fab - 品牌图标 (Font Awesome Brands)
3. 自定义样式

您可以使用CSS来自定义图标样式：

                                /* 修改大小 */
                                .fa-home {
                                    font-size: 24px;
                                }

                                /* 修改颜色 */
                                .fa-heart {
                                    color: red;
                                }

                                /* 添加动画 */
                                .fa-spinner {
                                    animation: spin 2s linear infinite;
                                }

                                @keyframes spin {
                                    0% { transform: rotate(0deg); }
                                    100% { transform: rotate(360deg); }
                                }