--- id: w3css-icons title: "W3CSS Icons" category: "Programming_Language" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["Font Awesome", "Material Icons", "Bootstrap Icons", "W3.CSS μ•„μ΄μ½˜"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.87 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["w3css", "css-framework", "w3schools", "icons"] raw_sources: ["https://www.w3schools.com/w3css/w3css_icons.asp"] applied_in: [] github_commit: "" --- # [[W3CSS Icons]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) W3.CSS has NO icon system of its own β€” it's explicitly framework-agnostic here, supporting Font Awesome, Google Material Icons, and Bootstrap Icons interchangeably, each via a completely different markup convention (`` vs. `home` vs. ``), meaning the icon syntax you use depends entirely on which external CDN you chose to link, not on W3.CSS. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Two-step integration** β€” (1) link the icon library's CSS from a CDN in ``, (2) add the icon's class name to an inline element (`` or `` are conventional). [S1] - **Font Awesome syntax** β€” class-name-based: ``. [S1] - **Material Icons syntax** β€” TEXT-content-based: `home` (the icon name is the element's text, not a class suffix). [S1] - **Bootstrap Icons (glyphicons) syntax** β€” class-name-based like Font Awesome: ``. [S1] - **Sizing via `w3-size` classes** β€” the same `w3-tiny` through `w3-jumbo` classes used elsewhere apply directly to icons too. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) - Font Awesome setup: ` `. [S1] - Material Icons setup (note: icon name as TEXT, not class): ` home`. [S1] - Bootstrap Icons setup: ` `. [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) - **μ•„μ΄μ½˜ λΌμ΄λΈŒλŸ¬λ¦¬λ³„ 문법 차이**: Font Awesome/Bootstrap은 클래슀λͺ…μœΌλ‘œ, Material IconsλŠ” μš”μ†Œμ˜ ν…μŠ€νŠΈ λ‚΄μš©μœΌλ‘œ μ•„μ΄μ½˜μ„ μ§€μ •ν•œλ‹€λŠ” 점이 μ„Έ 예제의 직접 λΉ„κ΅λ‘œ λͺ…ν™•νžˆ λ“œλŸ¬λ‚¨. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) ν˜„μž¬ 발견된 μ‹€μ œ 적용 사둀가 μ—†μŠ΅λ‹ˆλ‹€ β€” μ„Έ μ•„μ΄μ½˜ 라이브러리 쀑 ν•˜λ‚˜λ₯Ό 선택해 ν™ˆ/검색/μ‚­μ œ μ•„μ΄μ½˜μ„ ν‘œμ‹œν•˜λŠ” 것이 μ‹€μ „ UI μ•„μ΄μ½˜ μ‚¬μš©μ˜ ν‘œμ€€ νŒ¨ν„΄μ΄λ‹€. [S1] ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Material Icons uses text content, not a class suffix, unlike Font Awesome (HTML): ```html home ``` ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.87 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[W3.CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[W3CSS Tags]], [[W3CSS Grid]], [[W3CSS Defaults]] - **μ°Έμ‘° λ§₯락:** Badges & Icons μ„Ήμ…˜μ˜ λ§ˆμ§€λ§‰ β€” κ·Έλ¦¬λ“œ(Grid) μ±•ν„°λ‘œ 이어짐. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” W3.CSS Icons β€” https://www.w3schools.com/w3css/w3css_icons.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Icons" page (Astra wiki-curation, P-Reinforce v3.1 format).