Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

4.1 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

CSS Icons Font Awesome

🎯 한 줄 통찰 (One-line insight)

Icons can be added to an HTML page from an icon library such as Font Awesome, where each icon is a scalable vector that can be customized with CSS (size, color, shadow, etc.). [S1]

🧠 핵심 개념 (Core concepts)

Icon libraries — icons can easily be added to an HTML page using an icon library. [S1]
Scalable vectors — the icons are scalable vectors that can be customized with CSS (size, color, shadow, etc.). [S1]
No installation — to use Font Awesome icons, no downloading or installation is required. [S1]

🧩 추출된 패턴 (Extracted patterns)

Kit script in head — add the Font Awesome kit <script> to the <head> of the page to enable icons. [S1]
Inline element + class — place an icon by adding an inline element (<i> or <span>) carrying the appropriate Font Awesome class name (e.g. fas fa-cloud). [S1]

📖 세부 내용 (Details)

Icons can easily be added to your HTML page using an icon library such as Font Awesome. All the icons in the icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.). [S1]

Font Awesome Icons — to use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page. The kit reference takes this form: [S1]

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Note: No downloading or installation is required! [S1]

Example — adding Font Awesome icons: [S1]

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Each icon is produced by an <i> element with the relevant Font Awesome class names (e.g. fas fa-cloud, fas fa-heart). For the complete set of icon names, the page refers readers to the Font Awesome Icon Reference. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own example renders five icons (cloud, heart, car, file, bars) by adding the kit script to the head and inline <i> elements to the body. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single Font Awesome icon (language: HTML):

<i class="fas fa-cloud"></i>

Required head reference:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.88
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Icons Bootstrap, CSS Icons Google, CSS Fonts
참조 맥락: Referenced when adding scalable vector icons to a page without image assets.

📚 출처 (Sources)

[S1] W3Schools — CSS Icons Font Awesome — https://www.w3schools.com/css/css_icons.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Font Awesome" page (Astra wiki-curation, P-Reinforce v3.1 format).

4.1 KiB Raw Blame History