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.0 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 Bootstrap

🎯 한 줄 통찰 (One-line insight)

Bootstrap glyphicons can be added to a page by linking the Bootstrap CDN stylesheet in the <head> and placing <i> elements with glyphicon glyphicon-* class names — no download or installation required. [S1]

🧠 핵심 개념 (Core concepts)

Icon library approach — icons can be added from the Bootstrap icon library (glyphicons). [S1]
CDN-based — to use the Bootstrap glyphicons, add the Bootstrap CSS link inside the <head> section. [S1]
No installation — no downloading or installation is required. [S1]

🧩 추출된 패턴 (Extracted patterns)

Stylesheet link in head — reference the Bootstrap CDN stylesheet in <head> to enable glyphicons. [S1]
Two-class naming — each icon uses the base class glyphicon plus a specific glyphicon-<name> class on an <i> element. [S1]

📖 세부 내용 (Details)

Bootstrap Icons — to use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page: [S1]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

Example — adding Bootstrap glyphicons: [S1]

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Each icon is rendered by an <i> element carrying glyphicon together with a specific icon class (e.g. glyphicon-cloud, glyphicon-remove, glyphicon-user, glyphicon-envelope, glyphicon-thumbs-up). [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own example renders five glyphicons (cloud, remove, user, envelope, thumbs-up) by linking the Bootstrap CDN stylesheet and adding inline <i> elements. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single Bootstrap glyphicon (language: HTML):

<i class="glyphicon glyphicon-cloud"></i>

Required head reference:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

⚖️ 모순 및 업데이트 (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 Font Awesome, CSS Icons Google, CSS Fonts
참조 맥락: Referenced when adding glyphicons to a project already using the Bootstrap CDN.

📚 출처 (Sources)

[S1] W3Schools — CSS Icons Bootstrap — https://www.w3schools.com/css/css_icons_bootstrap.asp

📝 변경 이력 (Change history)

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

4.0 KiB Raw Blame History