Font Awesome图标库个性化定制指南从基础到高级打造独特网站视觉体验

引言

Font Awesome作为全球最受欢迎的图标库之一，为网页设计师和开发者提供了丰富的矢量图标资源。它不仅包含数千个免费图标，还支持高度个性化定制，使网站能够拥有独特而一致的视觉体验。本指南将从基础使用到高级定制技巧，全面介绍如何利用Font Awesome打造出令人印象深刻的网站视觉效果。

无论您是刚接触Font Awesome的新手，还是希望提升图标定制技能的专业人士，本文都将为您提供系统性的指导，帮助您充分发挥Font Awesome的潜力，为用户创造更加直观、美观的界面体验。

Font Awesome基础

什么是Font Awesome

Font Awesome是一个图标字体和CSS框架，最初由Dave Gandy创建。它提供了可缩放的矢量图标，可以通过CSS轻松定制大小、颜色、阴影等样式。目前，Font Awesome已经发展到第6版，包含超过2000个免费图标和更多专业版图标。

安装与引入

使用CDN引入

最简单的方式是通过CDN引入Font Awesome。只需在HTML文档的<head>部分添加以下代码：

<!-- Font Awesome 6 CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

通过npm安装

对于使用Node.js的项目，可以通过npm安装Font Awesome：

npm install @fortawesome/fontawesome-free

然后在您的JavaScript或TypeScript文件中引入：

import '@fortawesome/fontawesome-free/css/all.min.css';

下载并本地托管

您也可以从Font Awesome官网下载文件，并将其托管在您的服务器上：

<link rel="stylesheet" href="/path/to/your/fontawesome/css/all.min.css">

基本使用方法

Font Awesome图标的使用非常简单，主要通过<i>标签结合特定的类名来实现：

<!-- 基本图标 --> <i class="fas fa-home"></i> <!-- 不同样式 --> <i class="far fa-heart"></i> <!-- 常规样式 --> <i class="fas fa-heart"></i> <!-- 实心样式 --> <i class="fab fa-github"></i> <!-- 品牌图标 -->

Font Awesome 6提供了五种主要样式：

fas - 实心样式（Solid）
far - 常规样式（Regular）
fab - 品牌图标（Brands）
fal - 轻量样式（Light，专业版）
fad - 双色调样式（Duotone，专业版）

图标的选择与搭配

选择合适的图标

选择合适的图标是设计成功的关键。以下是选择图标时应考虑的几个因素：

1. 功能相关性

图标应直观地表达其功能或内容。例如，使用信封图标表示邮件功能，使用购物车图标表示电子商务功能。

<!-- 邮件链接 --> <a href="mailto:contact@example.com"> <i class="fas fa-envelope"></i> 联系我们 </a> <!-- 购物车 --> <div class="cart"> <i class="fas fa-shopping-cart"></i> <span class="cart-count">3</span> </div>

2. 视觉一致性

在整个网站中保持图标风格的一致性。如果您主要使用实心图标，就避免在某些地方突然使用常规样式图标，除非有特殊的设计意图。

<!-- 一致性示例 - 全部使用实心图标 --> <div class="navigation"> <a href="#"><i class="fas fa-home"></i> 首页</a> <a href="#"><i class="fas fa-user"></i> 关于我们</a> <a href="#"><i class="fas fa-envelope"></i> 联系</a> <a href="#"><i class="fas fa-cog"></i> 设置</a> </div>

3. 识别度

选择用户容易识别的图标。避免使用过于抽象或晦涩的图标，除非您的目标受众熟悉这些符号。

图标搭配原则

1. 功能分组

将相关功能的图标放在一起，形成视觉组。例如，所有社交媒体图标可以放在一起，所有用户操作相关的图标可以放在一起。

<!-- 社交媒体图标组 --> <div class="social-icons"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> <!-- 用户操作图标组 --> <div class="user-actions"> <button><i class="fas fa-search"></i></button> <button><i class="fas fa-heart"></i></button> <button><i class="fas fa-user"></i></button> </div>

2. 视觉平衡

确保图标在视觉上保持平衡。这包括大小、粗细和复杂度的平衡。

<!-- 视觉平衡示例 --> <div class="feature-list"> <div class="feature-item"> <i class="fas fa-rocket fa-2x"></i> <h3>快速</h3> <p>闪电般的加载速度</p> </div> <div class="feature-item"> <i class="fas fa-shield-alt fa-2x"></i> <h3>安全</h3> <p>企业级安全保障</p> </div> <div class="feature-item"> <i class="fas fa-chart-line fa-2x"></i> <h3>高效</h3> <p>提升工作效率</p> </div> </div>

3. 上下文适配

根据页面的上下文和整体设计风格选择和调整图标。例如，在极简主义设计中，可能需要选择更简单、更线条化的图标。

个性化定制基础

颜色定制

Font Awesome图标可以通过CSS轻松更改颜色，使其与您的品牌色彩保持一致。

<!-- 基本颜色定制 --> <style> .primary-icon { color: #3498db; /* 蓝色 */ } .success-icon { color: #2ecc71; /* 绿色 */ } .warning-icon { color: #f1c40f; /* 黄色 */ } .danger-icon { color: #e74c3c; /* 红色 */ } </style> <i class="fas fa-info-circle primary-icon"></i> <i class="fas fa-check-circle success-icon"></i> <i class="fas fa-exclamation-triangle warning-icon"></i> <i class="fas fa-times-circle danger-icon"></i>

大小定制

Font Awesome提供了10种预设大小，从fa-xs到fa-10x，也可以使用CSS自定义大小。

<!-- 预设大小 --> <i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-5x"></i> <i class="fas fa-camera fa-7x"></i> <i class="fas fa-camera fa-10x"></i> <!-- 自定义大小 --> <style> .custom-size { font-size: 42px; } </style> <i class="fas fa-star custom-size"></i>

旋转与翻转

您可以通过CSS类使图标旋转或翻转，增加视觉趣味性。

<!-- 旋转 --> <i class="fas fa-sync fa-spin"></i> <!-- 持续旋转 --> <i class="fas fa-spinner fa-pulse"></i> <!-- 8步旋转动画 --> <i class="fas fa-star fa-rotate-90"></i> <!-- 旋转90度 --> <i class="fas fa-star fa-rotate-180"></i> <!-- 旋转180度 --> <i class="fas fa-star fa-rotate-270"></i> <!-- 旋转270度 --> <!-- 翻转 --> <i class="fas fa-truck fa-flip-horizontal"></i> <!-- 水平翻转 --> <i class="fas fa-truck fa-flip-vertical"></i> <!-- 垂直翻转 --> <i class="fas fa-truck fa-flip-both"></i> <!-- 双向翻转 -->

阴影效果

为图标添加阴影可以使其在页面上更加突出，增加立体感。

<style> .icon-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .icon-glow { text-shadow: 0 0 10px rgba(52, 152, 219, 0.8); } .icon-3d { text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb, 4px 4px 0 #b9b9b9, 5px 5px 0 #aaa, 6px 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25); } </style> <i class="fas fa-heart icon-shadow"></i> <i class="fas fa-star icon-glow"></i> <i class="fas fa-rocket icon-3d"></i>

高级定制技巧

动画效果

除了Font Awesome内置的旋转动画，您还可以使用CSS创建更复杂的动画效果。

<style> /* 弹跳动画 */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .bounce { animation: bounce 1s infinite; } /* 摇摆动画 */ @keyframes swing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } } .swing { animation: swing 1s ease-in-out infinite; transform-origin: top center; } /* 脉冲动画 */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .pulse { animation: pulse 2s infinite; } </style> <i class="fas fa-arrow-down bounce"></i> <i class="fas fa-bell swing"></i> <i class="fas fa-heart pulse"></i>

组合图标

Font Awesome允许您通过fa-stack类将多个图标组合在一起，创建更复杂的视觉效果。

<!-- 基本图标堆叠 --> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> <!-- 自定义颜色堆叠 --> <span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x" style="color: #3498db;"></i> <i class="fas fa-camera fa-stack-1x fa-inverse"></i> </span> <!-- 三层堆叠 --> <span class="fa-stack fa-3x"> <i class="fas fa-circle fa-stack-2x" style="color: #e74c3c;"></i> <i class="fas fa-lock fa-stack-1x fa-inverse"></i> <i class="fas fa-slash fa-stack-1x" style="color: #2c3e50;"></i> </span>

渐变效果

使用CSS渐变可以为图标添加更加丰富的视觉效果。

<style> /* 线性渐变 */ .gradient-linear { background: linear-gradient(45deg, #3498db, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* 径向渐变 */ .gradient-radial { background: radial-gradient(circle, #f1c40f, #e74c3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* 多色渐变 */ .gradient-multi { background: linear-gradient(to right, #ff416c, #ff4b2b, #ff416c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; background-size: 200% auto; animation: gradient 3s linear infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> <i class="fas fa-star fa-3x gradient-linear"></i> <i class="fas fa-heart fa-3x gradient-radial"></i> <i class="fas fa-fire fa-3x gradient-multi"></i>

边框和背景

为图标添加边框和背景可以使其更加醒目，并符合特定的设计风格。

<style> /* 圆形背景 */ .icon-circle-bg { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: #3498db; color: white; } /* 方形背景 */ .icon-square-bg { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #2ecc71; color: white; } /* 圆角边框 */ .icon-rounded-border { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid #e74c3c; border-radius: 10px; color: #e74c3c; } /* 虚线边框 */ .icon-dashed-border { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px dashed #9b59b6; color: #9b59b6; } </style> <div class="icon-circle-bg"> <i class="fas fa-user"></i> </div> <div class="icon-square-bg"> <i class="fas fa-envelope"></i> </div> <div class="icon-rounded-border"> <i class="fas fa-phone"></i> </div> <div class="icon-dashed-border"> <i class="fas fa-heart"></i> </div>

性能优化

选择合适的加载方式

1. 使用SVG核心

Font Awesome 6提供了SVG核心版本，相比传统的Web字体方式，SVG核心具有更好的性能和可定制性。

<!-- 使用SVG核心 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> <!-- 使用SVG图标 --> <i class="fa-solid fa-house"></i>

2. 按需加载图标

为了减少加载时间，可以只加载您实际使用的图标，而不是整个图标库。

// 使用Font Awesome API按需加载图标 import { library } from '@fortawesome/fontawesome-svg-core'; import { faHome, faUser, faEnvelope } from '@fortawesome/free-solid-svg-icons'; import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'; // 添加需要的图标到库中 library.add(faHome, faUser, faEnvelope, faGithub, faTwitter);

使用图标字体子集

如果您使用的是Font Awesome的Web字体版本，可以创建一个只包含您所需图标的子集字体，以减少文件大小。

<!-- 使用Font Awesome子集生成工具创建的自定义字体文件 --> <link rel="stylesheet" href="/path/to/your/custom-subset-font.css">

图标懒加载

对于不在首屏显示的图标，可以实现懒加载，提高页面初始加载速度。

<!-- 使用Intersection Observer API实现图标懒加载 --> <div class="lazy-icon" data-icon="fas fa-star" data-visibility="hidden"></div> <script> document.addEventListener('DOMContentLoaded', function() { const lazyIcons = document.querySelectorAll('.lazy-icon'); const iconObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const icon = entry.target; const iconClass = icon.getAttribute('data-icon'); icon.innerHTML = `<i class="${iconClass}"></i>`; iconObserver.unobserve(icon); } }); }); lazyIcons.forEach(icon => { iconObserver.observe(icon); }); }); </script>

高级应用

SVG与JS框架结合

Font Awesome的SVG版本可以与现代JavaScript框架（如React、Vue、Angular）无缝集成，提供更好的性能和灵活性。

React中的使用

import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCoffee, faHeart } from '@fortawesome/free-solid-svg-icons'; function App() { return ( <div> <h1>Font Awesome in React</h1> <FontAwesomeIcon icon={faCoffee} size="2x" color="#3498db" /> <FontAwesomeIcon icon={faHeart} size="3x" color="#e74c3c" pulse /> </div> ); } export default App;

Vue中的使用

<template> <div> <h1>Font Awesome in Vue</h1> <font-awesome-icon :icon="['fas', 'coffee']" size="2x" style="color: #3498db" /> <font-awesome-icon :icon="['fas', 'heart']" size="3x" style="color: #e74c3c" :spin="true" /> </div> </template> <script> import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { library } from '@fortawesome/fontawesome-svg-core'; import { faCoffee, faHeart } from '@fortawesome/free-solid-svg-icons'; library.add(faCoffee, faHeart); export default { components: { FontAwesomeIcon } }; </script>

动态图标切换

使用JavaScript可以动态切换图标，创建交互式用户界面。

<style> .toggle-icon { cursor: pointer; font-size: 24px; color: #3498db; transition: all 0.3s ease; } .toggle-icon:hover { color: #2980b9; transform: scale(1.1); } </style> <i id="toggleIcon" class="fas fa-heart toggle-icon"></i> <script> document.getElementById('toggleIcon').addEventListener('click', function() { const icon = this; if (icon.classList.contains('fas')) { icon.classList.remove('fas', 'fa-heart'); icon.classList.add('far', 'fa-heart'); } else { icon.classList.remove('far', 'fa-heart'); icon.classList.add('fas', 'fa-heart'); } }); </script>

图标与表单元素结合

将Font Awesome图标与表单元素结合，可以提高用户体验和界面美观度。

<style> .input-group { position: relative; margin-bottom: 20px; } .input-group input { padding-left: 40px; width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .input-group i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; } .button-with-icon { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .button-with-icon:hover { background-color: #2980b9; } .button-with-icon i { margin-right: 8px; } </style> <!-- 带图标的输入框 --> <div class="input-group"> <i class="fas fa-user"></i> <input type="text" placeholder="用户名"> </div> <div class="input-group"> <i class="fas fa-lock"></i> <input type="password" placeholder="密码"> </div> <div class="input-group"> <i class="fas fa-envelope"></i> <input type="email" placeholder="电子邮箱"> </div> <!-- 带图标的按钮 --> <button class="button-with-icon"> <i class="fas fa-sign-in-alt"></i> 登录 </button> <button class="button-with-icon"> <i class="fas fa-user-plus"></i> 注册 </button>

图标与动画结合

将Font Awesome图标与CSS动画或JavaScript动画库结合，可以创建引人注目的交互效果。

<style> .animated-icon { font-size: 48px; color: #3498db; cursor: pointer; transition: all 0.3s ease; } .animated-icon:hover { transform: scale(1.2); } /* 抖动动画 */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .shake { animation: shake 0.5s; } /* 旋转动画 */ @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate { animation: rotate360 1s ease-in-out; } </style> <i id="shakeIcon" class="fas fa-bell animated-icon"></i> <i id="rotateIcon" class="fas fa-sync animated-icon"></i> <script> document.getElementById('shakeIcon').addEventListener('click', function() { this.classList.remove('shake'); void this.offsetWidth; // 触发重排 this.classList.add('shake'); }); document.getElementById('rotateIcon').addEventListener('click', function() { this.classList.remove('rotate'); void this.offsetWidth; // 触发重排 this.classList.add('rotate'); }); </script>

最佳实践与案例分析

最佳实践

1. 保持一致性

在整个网站中保持图标风格的一致性。如果您使用实心图标，就避免在类似功能上使用常规样式图标。

<!-- 好的做法 - 一致的图标风格 --> <div class="nav"> <a href="#"><i class="fas fa-home"></i> 首页</a> <a href="#"><i class="fas fa-info-circle"></i> 关于</a> <a href="#"><i class="fas fa-envelope"></i> 联系</a> </div> <!-- 不好的做法 - 混合的图标风格 --> <div class="nav"> <a href="#"><i class="fas fa-home"></i> 首页</a> <a href="#"><i class="far fa-info-circle"></i> 关于</a> <a href="#"><i class="fas fa-envelope"></i> 联系</a> </div>

2. 提供文本标签

对于重要的导航或操作元素，除了图标外，还应提供文本标签，确保可访问性和清晰度。

<!-- 好的做法 - 图标和文本结合 --> <button> <i class="fas fa-save"></i> 保存 </button> <!-- 不好的做法 - 只有图标 --> <button> <i class="fas fa-save"></i> </button>

3. 考虑可访问性

为图标添加适当的ARIA属性，确保屏幕阅读器可以正确解读。

<!-- 带ARIA标签的图标 --> <button aria-label="关闭"> <i class="fas fa-times" aria-hidden="true"></i> </button> <!-- 功能性图标 --> <a href="tel:+1234567890" aria-label="拨打电话"> <i class="fas fa-phone" aria-hidden="true"></i> </a>

4. 优化性能

只加载您需要的图标，使用SVG核心版本，并考虑使用图标懒加载技术。

// 好的做法 - 按需加载图标 import { library } from '@fortawesome/fontawesome-svg-core'; import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'; library.add(faHome, faUser); // 不好的做法 - 加载整个图标库 import '@fortawesome/fontawesome-free/js/all.js';

案例分析

案例1：社交媒体分享按钮

<style> .social-share { display: flex; gap: 15px; margin: 20px 0; } .social-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; color: white; text-decoration: none; transition: all 0.3s ease; } .social-share-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .facebook { background-color: #3b5998; } .twitter { background-color: #1da1f2; } .linkedin { background-color: #0077b5; } .pinterest { background-color: #bd081c; } .social-share-btn i { font-size: 24px; } </style> <div class="social-share"> <a href="#" class="social-share-btn facebook" aria-label="分享到Facebook"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="social-share-btn twitter" aria-label="分享到Twitter"> <i class="fab fa-twitter"></i> </a> <a href="#" class="social-share-btn linkedin" aria-label="分享到LinkedIn"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" class="social-share-btn pinterest" aria-label="分享到Pinterest"> <i class="fab fa-pinterest-p"></i> </a> </div>

案例2：功能特性展示

<style> .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding: 40px 0; } .feature { text-align: center; padding: 30px; border-radius: 10px; background-color: #f9f9f9; transition: all 0.3s ease; } .feature:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 20px; border-radius: 50%; background: linear-gradient(45deg, #3498db, #9b59b6); color: white; font-size: 36px; } .feature h3 { margin-bottom: 15px; color: #2c3e50; } .feature p { color: #7f8c8d; line-height: 1.6; } </style> <div class="features"> <div class="feature"> <div class="feature-icon"> <i class="fas fa-rocket"></i> </div> <h3>快速加载</h3> <p>优化的代码和资源，确保您的网站以闪电般的速度加载</p> </div> <div class="feature"> <div class="feature-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>安全可靠</h3> <p>企业级安全措施，保护您的数据和用户隐私</p> </div> <div class="feature"> <div class="feature-icon"> <i class="fas fa-mobile-alt"></i> </div> <h3>响应式设计</h3> <p>完美适配各种设备，从手机到桌面电脑</p> </div> <div class="feature"> <div class="feature-icon"> <i class="fas fa-chart-line"></i> </div> <h3>数据分析</h3> <p>深入了解用户行为，优化您的业务决策</p> </div> </div>

案例3：交互式导航菜单

<style> .nav-menu { display: flex; background-color: #2c3e50; border-radius: 8px; overflow: hidden; } .nav-item { position: relative; flex: 1; } .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 15px; color: #ecf0f1; text-decoration: none; transition: all 0.3s ease; } .nav-link:hover { background-color: #34495e; } .nav-link.active { background-color: #3498db; } .nav-link i { font-size: 24px; margin-bottom: 8px; } .nav-link span { font-size: 14px; } .nav-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; padding: 8px 12px; background-color: #2c3e50; color: white; border-radius: 4px; font-size: 14px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; } .nav-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; } .nav-item:hover .nav-tooltip { opacity: 1; visibility: visible; } </style> <nav class="nav-menu"> <div class="nav-item"> <a href="#" class="nav-link active"> <i class="fas fa-home"></i> <span>首页</span> </a> <div class="nav-tooltip">返回首页</div> </div> <div class="nav-item"> <a href="#" class="nav-link"> <i class="fas fa-search"></i> <span>搜索</span> </a> <div class="nav-tooltip">搜索内容</div> </div> <div class="nav-item"> <a href="#" class="nav-link"> <i class="fas fa-bell"></i> <span>通知</span> </a> <div class="nav-tooltip">查看通知</div> </div> <div class="nav-item"> <a href="#" class="nav-link"> <i class="fas fa-envelope"></i> <span>消息</span> </a> <div class="nav-tooltip">查看消息</div> </div> <div class="nav-item"> <a href="#" class="nav-link"> <i class="fas fa-user"></i> <span>我的</span> </a> <div class="nav-tooltip">个人中心</div> </div> </nav> <script> // 导航菜单交互 document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 移除所有active类 document.querySelectorAll('.nav-link').forEach(l => { l.classList.remove('active'); }); // 添加active类到当前点击的链接 this.classList.add('active'); }); }); </script>