Spaces:
Running
Running
Download index.html from VeryOnly123/bdicon: direct link, hf CLI and curl.
- Browser
- Download file 22.6 kB
-
https://huggingface.co/spaces/VeryOnly123/bdicon/resolve/main/index.html
- Command line
-
hf download hf://spaces/VeryOnly123/bdicon/index.html
-
curl -L -o index.html https://huggingface.co/spaces/VeryOnly123/bdicon/resolve/main/index.html
22.6 kB
| <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> | |