bdicon / index.html
VeryOnly123's picture
鑷姩鎻愪氦: 2026/04/13 周一 21:16:04.43
a9be50c
Raw History Blame Contribute Delete
22.6 kB
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>游戏可用图标 · Font Awesome 6 子集</title>
<link rel="stylesheet" href="css/fontawesome.css">
<link rel="stylesheet" href="css/solid.css">
<link rel="stylesheet" href="css/duotone.css">
<link rel="stylesheet" href="css/brands.css">
<link rel="stylesheet" href="css/custom-icons.css">
<style>
* {
box-sizing: border-box;
margin: 0;
}
body {
background: #f8fafc;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
padding: 24px 16px;
color: #0f172a;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
margin-bottom: 28px;
}
h1 {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 2rem;
letter-spacing: -0.01em;
color: #0b1120;
margin-bottom: 8px;
}
h1 i {
color: #3b82f6;
font-size: 2rem;
}
.subtitle {
color: #475569;
font-size: 1rem;
border-left: 4px solid #94a3b8;
padding-left: 16px;
margin-top: 8px;
margin-bottom: 24px;
}
.badge-pro {
background: #fbbf24;
color: #1e293b;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
text-transform: uppercase;
margin-left: 10px;
vertical-align: middle;
}
.badge-kit {
background: #a78bfa;
color: #1e293b;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
text-transform: uppercase;
margin-left: 10px;
vertical-align: middle;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-bottom: 32px;
}
.search-wrapper {
position: relative;
max-width: 500px;
flex: 1;
}
.search-wrapper i {
position: absolute;
left: 16px;
top: 14px;
color: #64748b;
}
#searchInput {
width: 100%;
padding: 14px 20px 14px 48px;
font-size: 1rem;
border: 1.5px solid #e2e8f0;
border-radius: 60px;
background: white;
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.03);
transition: all 0.2s;
}
#searchInput:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 8px 12px -6px rgba(59,130,246,0.2);
}
.filter-toggle {
display: flex;
background: #e2e8f0;
border-radius: 60px;
padding: 4px;
gap: 0;
}
.filter-toggle button {
border: none;
background: transparent;
padding: 10px 20px;
border-radius: 60px;
font-size: 0.875rem;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.filter-toggle button.active {
background: white;
color: #1e293b;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
font-weight: 600;
}
.stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
margin-bottom: 20px;
}
.count-info {
color: #334155;
font-weight: 500;
background: #eef2ff;
padding: 6px 16px;
border-radius: 30px;
font-size: 0.9rem;
}
.legend {
display: flex;
gap: 20px;
font-size: 0.85rem;
color: #475569;
}
.legend span i {
margin-right: 6px;
width: 18px;
}
.pro-tag {
background: #fef9c3;
border-radius: 12px;
padding: 2px 10px;
font-size: 0.75rem;
font-weight: 600;
color: #854d0e;
margin-left: 8px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.card {
background: white;
border-radius: 20px;
padding: 18px 8px 12px;
box-shadow: 0 8px 20px -6px rgba(0,0,0,0.05);
border: 1px solid #f1f5f9;
transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
user-select: none;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 28px -10px rgba(0,27,58,0.12);
border-color: #bdd3ff;
}
.card:active {
transform: translateY(1px);
box-shadow: 0 6px 12px -6px rgba(0,0,0,0.1);
}
.icon-preview {
font-size: 42px;
margin-bottom: 12px;
color: #1e293b;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
}
.class-name {
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
background: #f1f5f9;
padding: 6px 10px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 500;
color: #0f172a;
width: 100%;
word-break: break-word;
border: 1px solid #e2e8f0;
transition: background 0.1s;
margin-top: 6px;
}
.aliases {
font-size: 0.7rem;
color: #62748c;
margin-top: 6px;
word-break: break-word;
line-height: 1.4;
}
.pro-badge {
background: #fde68a;
color: #78350f;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 40px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.kit-badge {
background: #e9d5ff;
color: #6b21a8;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 40px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.footer-note {
margin-top: 48px;
text-align: center;
font-size: 0.85rem;
color: #62748c;
border-top: 1px dashed #cbd5e1;
padding-top: 24px;
}
.toast-msg {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: white;
padding: 10px 24px;
border-radius: 60px;
font-size: 0.9rem;
box-shadow: 0 12px 30px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
z-index: 999;
}
.toast-msg.show {
opacity: 1;
pointer-events: none;
}
.no-result {
grid-column: 1 / -1;
text-align: center;
padding: 50px 20px;
background: #f1f5f9;
border-radius: 40px;
color: #475569;
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
<i class="fa-solid fa-gamepad"></i>
游戏内可用图标库
<span class="badge-pro">Font Awesome 6 Pro 子集</span>
<span class="badge-kit">+ 自定义图标</span>
</h1>
<div class="subtitle">
基于从 bloxd.io 提取的 5 个 CSS 文件 — 包含 <strong>自定义图标 / Duotone / Solid / Brands</strong>。<br>
👆 点击卡片复制<strong>不带 `fa-` 前缀</strong>的图标名(例如 <code>copy</code>)
</div>
</header>
<div class="controls">
<div class="search-wrapper">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="searchInput" placeholder="搜索图标名称或类名 (例如 copy, heart, user...)" autocomplete="off">
</div>
<div class="filter-toggle">
<button id="btnAll" class="active" onclick="setFilter('all')">bloxd全集</button>
<button id="btnGame" onclick="setFilter('game')">商店主图标可用</button>
</div>
</div>
<div class="stats">
<div class="count-info">
<span id="visibleCount">0</span> / <span id="totalCount">0</span> 个图标
</div>
<div class="legend">
<span><i class="fa-solid fa-check" style="color:#16a34a;"></i> 免费版可预览</span>
<span><i class="fa-solid fa-crown" style="color:#d97706;"></i> Pro 专属</span>
<span><i class="fa-kit fa-pants" style="color:#7c3aed;"></i> 自定义 Kit</span>
</div>
</div>
<div class="grid" id="iconGrid"></div>
<div class="footer-note">
⚡ 点击卡片复制短名称(无 `fa-`)· 图标来源:fontawesome.css / solid / duotone / brands / custom-icons(bloxd.io)· 实际样式以游戏内为准
</div>
</div>
<div id="toast" class="toast-msg">📋 已复制</div>
<script>
(function(){
"use strict";
let currentFilter = 'all';
const iconDatabase = [
{ primary: "fa-add", aliases: ["fa-plus"], isPro: false },
{ primary: "fa-angles-up", aliases: ["fa-angle-double-up"], isPro: false },
{ primary: "fa-angle-down", aliases: [], isPro: false },
{ primary: "fa-angle-up", aliases: [], isPro: false },
{ primary: "fa-angle-double-up", aliases: [], isPro: false },
{ primary: "fa-apple", aliases: [], isPro: false, available: false },
{ primary: "fa-arrow-up", aliases: [], isPro: false },
{ primary: "fa-arrow-up-right-from-square", aliases: ["fa-external-link"], isPro: false },
{ primary: "fa-arrows", aliases: ["fa-arrows-up-down-left-right"], isPro: false },
{ primary: "fa-arrows-h", aliases: ["fa-arrows-left-right"], isPro: false },
{ primary: "fa-arrows-rotate", aliases: ["fa-refresh","fa-sync"], isPro: false },
{ primary: "fa-arrows-left-right", aliases: [], isPro: false },
{ primary: "fa-award", aliases: [], isPro: false },
{ primary: "fa-backpack", aliases: [], isPro: true },
{ primary: "fa-bars", aliases: ["fa-navicon"], isPro: false },
{ primary: "fa-block-question", aliases: [], isPro: true },
{ primary: "fa-bolt", aliases: ["fa-zap"], isPro: false },
{ primary: "fa-boot", aliases: [], isPro: true },
{ primary: "fa-caret-up", aliases: [], isPro: false },
{ primary: "fa-cart-shopping", aliases: ["fa-shopping-cart"], isPro: false },
{ primary: "fa-check", aliases: [], isPro: false },
{ primary: "fa-chess-rook", aliases: [], isPro: false },
{ primary: "fa-circle-info", aliases: ["fa-info-circle"], isPro: false },
{ primary: "fa-circle-plus", aliases: ["fa-plus-circle"], isPro: false },
{ primary: "fa-clock-rotate-left", aliases: ["fa-history"], isPro: false },
{ primary: "fa-cog", aliases: ["fa-gear"], isPro: false },
{ primary: "fa-coins", aliases: [], isPro: false },
{ primary: "fa-comment-dots", aliases: ["fa-commenting"], isPro: false },
{ primary: "fa-compress", aliases: [], isPro: false },
{ primary: "fa-computer-mouse", aliases: ["fa-mouse"], isPro: false },
{ primary: "fa-cookie", aliases: [], isPro: false },
{ primary: "fa-copy", aliases: [], isPro: false },
{ primary: "fa-crosshairs", aliases: [], isPro: false },
{ primary: "fa-crown", aliases: [], isPro: false },
{ primary: "fa-cube", aliases: [], isPro: false },
{ primary: "fa-cubes", aliases: [], isPro: false },
{ primary: "fa-cut", aliases: ["fa-scissors"], isPro: false },
{ primary: "fa-dice", aliases: [], isPro: false },
{ primary: "fa-discord", aliases: [], isPro: false, available: false },
{ primary: "fa-dizzy", aliases: ["fa-face-dizzy"], isPro: false },
{ primary: "fa-door-closed", aliases: [], isPro: false },
{ primary: "fa-door-open", aliases: [], isPro: false },
{ primary: "fa-download", aliases: [], isPro: false },
{ primary: "fa-edit", aliases: ["fa-pen-to-square"], isPro: false },
{ primary: "fa-ellipsis", aliases: ["fa-ellipsis-h"], isPro: false },
{ primary: "fa-exclamation", aliases: [], isPro: false },
{ primary: "fa-expand", aliases: [], isPro: false },
{ primary: "fa-eye", aliases: [], isPro: false },
{ primary: "fa-eye-slash", aliases: [], isPro: false },
{ primary: "fa-face-diagonal-mouth", aliases: [], isPro: true },
{ primary: "fa-face-raised-eyebrow", aliases: [], isPro: true },
{ primary: "fa-face-smile", aliases: ["fa-smile"], isPro: false },
{ primary: "fa-face-worried", aliases: [], isPro: true },
{ primary: "fa-feather-pointed", aliases: ["fa-feather-alt"], isPro: false },
{ primary: "fa-file-lines", aliases: ["fa-file-alt","fa-file-text"], isPro: false },
{ primary: "fa-file-clipboard", aliases: ["fa-paste"], isPro: false },
{ primary: "fa-film", aliases: [], isPro: false },
{ primary: "fa-fire", aliases: [], isPro: false },
{ primary: "fa-hand-fist", aliases: ["fa-fist-raised"], isPro: false },
{ primary: "fa-flag", aliases: [], isPro: false },
{ primary: "fa-folder-image", aliases: [], isPro: true },
{ primary: "fa-gauge-high", aliases: ["fa-tachometer-alt","fa-tachometer-alt-fast"], isPro: false },
{ primary: "fa-gem", aliases: [], isPro: false },
{ primary: "fa-globe", aliases: [], isPro: false },
{ primary: "fa-hammer", aliases: [], isPro: false },
{ primary: "fa-hand-back-point-up", aliases: [], isPro: true },
{ primary: "fa-hand-holding-medical", aliases: [], isPro: true },
{ primary: "fa-hand-point-left", aliases: [], isPro: false },
{ primary: "fa-hat-santa", aliases: [], isPro: true },
{ primary: "fa-hat-witch", aliases: [], isPro: true },
{ primary: "fa-heart", aliases: [], isPro: false },
{ primary: "fa-icons", aliases: ["fa-heart-music-camera-bolt"], isPro: true },
{ primary: "fa-joystick", aliases: [], isPro: true },
{ primary: "fa-layer-group", aliases: [], isPro: false },
{ primary: "fa-lightbulb", aliases: [], isPro: false },
{ primary: "fa-list", aliases: ["fa-list-squares"], isPro: false },
{ primary: "fa-location-check", aliases: ["fa-map-marker-check"], isPro: false },
{ primary: "fa-location-xmark", aliases: ["fa-map-marker-times","fa-map-marker-xmark"], isPro: false },
{ primary: "fa-lock", aliases: [], isPro: false },
{ primary: "fa-lock-open", aliases: [], isPro: false },
{ primary: "fa-magnifying-glass", aliases: ["fa-search"], isPro: false },
{ primary: "fa-map-marker-check", aliases: [], isPro: false },
{ primary: "fa-map-marker-times", aliases: [], isPro: false },
{ primary: "fa-map-marker-xmark", aliases: [], isPro: false },
{ primary: "fa-minus-square", aliases: ["fa-square-minus"], isPro: false },
{ primary: "fa-mouse", aliases: [], isPro: false },
{ primary: "fa-music", aliases: [], isPro: false },
{ primary: "fa-navicon", aliases: [], isPro: false },
{ primary: "fa-palette", aliases: [], isPro: false },
{ primary: "fa-pants", aliases: [], isPro: false, available: false },
{ primary: "fa-pen", aliases: [], isPro: false },
{ primary: "fa-pen-field", aliases: [], isPro: true },
{ primary: "fa-paste", aliases: [], isPro: false },
{ primary: "fa-pen-to-square", aliases: [], isPro: false },
{ primary: "fa-person", aliases: ["fa-male"], isPro: false },
{ primary: "fa-person-arrow-down-to-line", aliases: [], isPro: true },
{ primary: "fa-person-arrow-up-from-line", aliases: [], isPro: true },
{ primary: "fa-person-falling-burst", aliases: [], isPro: true },
{ primary: "fa-person-military-pointing", aliases: [], isPro: true },
{ primary: "fa-planet-ringed", aliases: [], isPro: true },
{ primary: "fa-power-off", aliases: [], isPro: false },
{ primary: "fa-plus", aliases: [], isPro: false },
{ primary: "fa-plus-circle", aliases: [], isPro: false },
{ primary: "fa-recycle", aliases: [], isPro: false },
{ primary: "fa-redo-alt", aliases: ["fa-rotate-forward"], isPro: false },
{ primary: "fa-right-from-bracket", aliases: ["fa-sign-out-alt"], isPro: false },
{ primary: "fa-rocket-launch", aliases: [], isPro: true },
{ primary: "fa-rotate-forward", aliases: [], isPro: false },
{ primary: "fa-rotate-right", aliases: ["fa-redo-alt","fa-rotate-forward"], isPro: false },
{ primary: "fa-shoe", aliases: [], isPro: false, available: false },
{ primary: "fa-shield", aliases: ["fa-shield-blank"], isPro: false },
{ primary: "fa-shield-halved", aliases: ["fa-shield-alt"], isPro: false },
{ primary: "fa-shirt", aliases: ["fa-t-shirt","fa-tshirt"], isPro: false },
{ primary: "fa-snowflake", aliases: [], isPro: false },
{ primary: "fa-square-dashed", aliases: [], isPro: true },
{ primary: "fa-star", aliases: [], isPro: false },
{ primary: "fa-store", aliases: [], isPro: false },
{ primary: "fa-swords", aliases: [], isPro: true },
{ primary: "fa-t-shirt", aliases: [], isPro: false },
{ primary: "fa-tachometer-alt", aliases: [], isPro: false },
{ primary: "fa-tachometer-alt-fast", aliases: [], isPro: false },
{ primary: "fa-terminal", aliases: [], isPro: false },
{ primary: "fa-trash-can", aliases: ["fa-trash-alt"], isPro: false },
{ primary: "fa-trophy", aliases: [], isPro: false },
{ primary: "fa-tshirt", aliases: [], isPro: false },
{ primary: "fa-up-from-bracket", aliases: [], isPro: true },
{ primary: "fa-upload", aliases: [], isPro: false },
{ primary: "fa-user", aliases: [], isPro: false },
{ primary: "fa-user-astronaut", aliases: [], isPro: false },
{ primary: "fa-user-group", aliases: ["fa-user-friends"], isPro: false },
{ primary: "fa-user-group-crown", aliases: ["fa-users-crown"], isPro: true },
{ primary: "fa-user-minus", aliases: [], isPro: false },
{ primary: "fa-user-plus", aliases: [], isPro: false },
{ primary: "fa-user-slash", aliases: [], isPro: false },
{ primary: "fa-user-unlock", aliases: [], isPro: true },
{ primary: "fa-users-crown", aliases: [], isPro: true },
{ primary: "fa-video", aliases: ["fa-video-camera"], isPro: false },
{ primary: "fa-volume", aliases: ["fa-volume-medium"], isPro: false },
{ primary: "fa-volume-low", aliases: ["fa-volume-down"], isPro: false },
{ primary: "fa-volume-medium", aliases: [], isPro: false },
{ primary: "fa-volume-down", aliases: [], isPro: false },
{ primary: "fa-volume-slash", aliases: [], isPro: false },
{ primary: "fa-wrench", aliases: [], isPro: false },
{ primary: "fa-x", aliases: [], isPro: false },
{ primary: "fa-youtube", aliases: [], isPro: false, available: false },
{ primary: "fa-zap", aliases: [], isPro: false }
];
const totalIcons = iconDatabase.length;
document.getElementById('totalCount').textContent = totalIcons;
const grid = document.getElementById('iconGrid');
const searchInput = document.getElementById('searchInput');
const visibleSpan = document.getElementById('visibleCount');
const toast = document.getElementById('toast');
window.setFilter = function(mode) {
currentFilter = mode;
document.getElementById('btnAll').classList.toggle('active', mode === 'all');
document.getElementById('btnGame').classList.toggle('active', mode === 'game');
renderCards(searchInput.value);
};
function getShortName(primaryClass) {
return primaryClass.replace(/^fa-/, '');
}
function getIconClass(item) {
if (item.primary === "fa-pants" || item.primary === "fa-shoe") return "fa-kit " + item.primary;
if (item.available === false) return "fa-brands " + item.primary;
return "fa-solid " + item.primary;
}
function renderCards(filterText = '') {
const searchTerm = filterText.trim().toLowerCase();
let visibleCount = 0;
let html = '';
iconDatabase.forEach(item => {
const primary = item.primary;
const aliases = item.aliases;
const isPro = item.isPro;
const isUnavailable = item.available === false;
if (currentFilter === 'game' && isUnavailable) return;
const allNames = [primary, ...aliases].map(n => n.toLowerCase());
const matches = searchTerm === '' || allNames.some(name => name.includes(searchTerm));
if (!matches) return;
visibleCount++;
const shortName = getShortName(primary);
const iconClass = getIconClass(item);
const aliasStr = aliases.length ? aliases.map(a => a.replace(/^fa-/, '')).join(' · ') : '';
html += `
<div class="card" data-short="${shortName}" title="点击复制 ${shortName}">
<div class="icon-preview">
<i class="${iconClass}"></i>
</div>
<div class="class-name">${primary}</div>
${aliasStr ? `<div class="aliases">别名: ${aliasStr}</div>` : ''}
${isPro ? '<div class="pro-badge"><i class="fa-solid fa-crown" style="font-size:10px;"></i> PRO</div>' : ''}
${isUnavailable ? '<div class="kit-badge"><i class="fa-kit fa-pants" style="font-size:10px;"></i> 仅供参考</div>' : ''}
</div>
`;
});
if (visibleCount === 0) {
html = `<div class="no-result"><i class="fa-regular fa-face-frown" style="margin-right:10px;"></i>没有匹配的图标,试试 "copy", "heart" 或 "user"</div>`;
}
grid.innerHTML = html;
visibleSpan.textContent = visibleCount;
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', (e) => {
const shortName = card.dataset.short;
if (shortName) {
navigator.clipboard?.writeText(shortName).then(() => {
showToast(`📋 已复制: ${shortName}`);
}).catch(() => {
fallbackCopy(shortName);
});
}
});
});
}
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast(`📋 已复制: ${text}`);
}
function showToast(msg) {
toast.textContent = msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 1800);
}
let debounceTimer;
searchInput.addEventListener('input', (e) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
renderCards(e.target.value);
}, 200);
});
renderCards();
})();
</script>
</body>
</html>