아이콘

참고:

모든 웹 사이트에 아이콘이 없는 대부분의 경우 작성자를 위해 아이콘을 참조하는 간단한 방법이 있습니다.

아이콘은 :<iconname>: 표기법으로 참조됩니다. 브라우저에서 아이콘을 일반 css 클래스, 아이콘 글꼴 또는 SVG으로 구현하는 방법이 다르므로 이를 모두 지원하는 비간섭 방법을 제공합니다.

보일러판 프로젝트에는 아이콘을 처리하는 가장 일반적인 방법이므로 `<span>`s 아이콘에 SVG를 삽입하는 자동 메커니즘이 포함되어 있습니다.

일부 아이콘(예: 블록에서 참조된 아이콘)은 코드에 있어야 하지만 작성자가 새 아이콘을 추가하고 참조하고 지속적으로 업데이트해야 할 때가 있습니다. 이러한 아이콘은 콘텐츠 원본의 /icons/ 폴더 아래에 있는 콘텐츠와 함께 사용할 수 있으며 있어야 합니다(예: Sharepoint 또는 Google 드라이브). 이러한 아이콘은 :<iconname>: 표기법을 사용하여 정확히 동일한 방식으로 참조할 수도 있습니다. 이렇게 하면 마케터는 코드 변경에 대한 종속성 없이 콘텐츠에 필요한 아이콘을 추가하고 업데이트할 수 있습니다.

예:

라이브 출력 보기

콘텐츠 구조:

:<iconname>:은(는) 모든 기본 콘텐츠 구문의 일부로 삽입할 수 있습니다.

문서에서 내용 보기

코드:

아이콘은 기본 콘텐츠이며 프로젝트별 CSS 코드에서 스타일링됩니다. SVG를 로드하는 데 필요한 JavaScript이 있는 경우 필요에 따라 조정할 수 있습니다.
이 코드는 Boilerplate에 포함되어 있으므로 복사할 필요가 없습니다.

SVG 로딩 코드 보기