mirror of
https://github.com/Silentely/eSIM-Tools.git
synced 2026-09-03 06:24:20 +08:00
c004e069e7
- 下载并配置本地 Font Awesome 文件 - 修改 HTML 文件中的图标引用路径 - 更新 Content Security Policy 策略 - 创建测试页面验证图标显示 - 优化图标加载性能
189 lines
5.8 KiB
HTML
189 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Font Awesome 图标测试</title>
|
|
<link rel="stylesheet" href="/src/assets/fontawesome/all.min.css">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
min-height: 100vh;
|
|
color: white;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.icon-test {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.icon {
|
|
font-size: 24px;
|
|
width: 30px;
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1><i class="fas fa-vial"></i> Font Awesome 图标测试</h1>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-sim-card icon"></i>
|
|
<span>SIM卡图标 (fas fa-sim-card)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-mobile-alt icon"></i>
|
|
<span>手机图标 (fas fa-mobile-alt)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-check icon"></i>
|
|
<span>勾选图标 (fas fa-check)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-arrow-right icon"></i>
|
|
<span>箭头图标 (fas fa-arrow-right)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fab fa-github icon"></i>
|
|
<span>GitHub图标 (fab fa-github)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-info-circle icon"></i>
|
|
<span>信息图标 (fas fa-info-circle)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-shield-alt icon"></i>
|
|
<span>盾牌图标 (fas fa-shield-alt)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-qrcode icon"></i>
|
|
<span>二维码图标 (fas fa-qrcode)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-envelope icon"></i>
|
|
<span>邮件图标 (fas fa-envelope)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-user icon"></i>
|
|
<span>用户图标 (fas fa-user)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-book icon"></i>
|
|
<span>书本图标 (fas fa-book)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-gift icon"></i>
|
|
<span>礼物图标 (fas fa-gift)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-clock icon"></i>
|
|
<span>时钟图标 (fas fa-clock)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-exclamation-triangle icon"></i>
|
|
<span>警告图标 (fas fa-exclamation-triangle)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-copy icon"></i>
|
|
<span>复制图标 (fas fa-copy)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-external-link-alt icon"></i>
|
|
<span>外部链接图标 (fas fa-external-link-alt)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-magic icon"></i>
|
|
<span>魔法图标 (fas fa-magic)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-download icon"></i>
|
|
<span>下载图标 (fas fa-download)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-trash-alt icon"></i>
|
|
<span>删除图标 (fas fa-trash-alt)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-key icon"></i>
|
|
<span>钥匙图标 (fas fa-key)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-cookie-bite icon"></i>
|
|
<span>Cookie图标 (fas fa-cookie-bite)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-sign-in-alt icon"></i>
|
|
<span>登录图标 (fas fa-sign-in-alt)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-check-circle icon"></i>
|
|
<span>成功图标 (fas fa-check-circle)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-user-circle icon"></i>
|
|
<span>用户圆圈图标 (fas fa-user-circle)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-bookmark icon"></i>
|
|
<span>书签图标 (fas fa-bookmark)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-hand-point-right icon"></i>
|
|
<span>手指图标 (fas fa-hand-point-right)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-warning icon"></i>
|
|
<span>警告图标 (fas fa-warning)</span>
|
|
</div>
|
|
|
|
<div class="icon-test">
|
|
<i class="fas fa-vial icon"></i>
|
|
<span>试管图标 (fas fa-vial)</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |