04

ไอคอน

สูตรไทล์สี่เหลี่ยมมุมโค้ง กรอบ 48x48 รัศมี 12px พื้นหลังโทนสี

สูตรไทล์ไอคอน

Tile size48x48
Tile radius12px
Inline icon12px to 16px
Toolbar / nav icon20px
Card icon24px to 28px inside a 48x48 tile
Stroke2 round/round
ViewBox24 24

โทน

cyan
rgba(0, 139, 139, 0.3)
bg:icon-tint:cyan
green
rgba(34, 197, 94, 0.3)
bg:icon-tint:green
purple
rgba(124, 77, 255, 0.3)
bg:icon-tint:purple
orange
rgba(251, 146, 60, 0.3)
bg:icon-tint:orange
blue
rgba(59, 130, 246, 0.3)
bg:icon-tint:blue
red
rgba(239, 68, 68, 0.3)
bg:icon-tint:red

ไอคอนแดชบอร์ด

ชุดไอคอนผลิตภัณฑ์มาตรฐานที่ใช้ในการนำทางแดชบอร์ดของ BetterGuard ใช้ Heroicons v2 outline ขนาด 24x24, stroke 2 round/round, แสดงผลแบบ inline (ไม่มีไลบรารีไอคอน ไม่มี sprite) ทุกครั้งที่มีการเพิ่มไอคอนใหม่ในแดชบอร์ด ให้สะท้อนมาที่นี่ด้วย

ซ่อนข้อมูล ปกป้อง
ประวัติ ปกป้อง
การตั้งค่า ปกป้อง
ฟอรัมผู้ทดสอบ ปกป้อง
พิมพ์เขียว ปกป้อง
ตั๋ว สนับสนุน
ช่วยเหลือ สนับสนุน
เอเจนต์ ระบบ
สถานะ ระบบ
Admin ระบบ

Stroke: #9ca3af inactive (shown above) · #22d3ee active. Both inherited via stroke="currentColor" from the surrounding .nav-item color.

โล่ Admin เป็นเส้นทางที่กำหนดเอง ไม่ใช่ Heroicons มาตรฐาน อย่าเปลี่ยนเป็นโล่ Heroicons มาตรฐาน

<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>

ตัวอย่าง: Obfuscate (lock-closed) คัดลอกมาร์กอัปนี้ไปยังเทมเพลต Blade โดยตรง; stroke="currentColor" จะรับสีของข้อความโดยรอบ

ขนาดที่แนะนำ

ไอคอนอินไลน์: 12-16px ทูลบาร์/นาฟ: 20px ไอคอนการ์ดภายในไทล์ 48x48: 24-28px หัวโลโก้: 32-40px Apple touch icon: 180px