Icon

Icon (아이콘)

어떤 아이콘 폰트든 담을 수 있는 컨테이너예요. 아이콘은 로딩에 몇 초 걸릴 수 있고, 아이콘이 차지할 공간을 제어하고 싶기 때문에 icon 클래스를 신뢰할 수 있는 정사각 컨테이너로 사용할 수 있어요. 페이지 로딩 시 레이아웃이 "튀는(jump)" 현상도 막아 줘요.

출처: 문서

본문

icon 요소는 어떤 아이콘 폰트든 담을 수 있는 컨테이너예요. 아이콘은 로딩에 몇 초 걸릴 수 있고, 아이콘이 차지할 공간을 제어하고 싶기 때문에 icon 클래스를 신뢰할 수 있는 정사각 컨테이너로 사용해서 페이지 로딩 시 레이아웃이 "점프"하지 않도록 막을 수 있어요.

Example

<span class="icon">
  <i class="fas fa-home"></i>
</span>

노란 배경은 데모를 위한 것으로, 아이콘 컨테이너의 영역을 강조하기 위한 거예요.

기본적으로 icon 컨테이너는 정확히 1.5rem x 1.5rem를 차지해요. 아이콘 자체의 크기는 사용하는 아이콘 라이브러리에 따라 정해져요. 예를 들어 Font Awesome 5 아이콘은 폰트 크기를 상속받아요.

아이콘 텍스트 (Icon text)

icon-text 래퍼를 사용하면 icon과 텍스트를 결합할 수 있어요. 안쪽의 모든 텍스트가 각자 자신의 span 요소로 감싸져 있어야 해요.

Example

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

icon 요소와 텍스트 요소는 원하는 만큼 조합할 수 있어요.

Example

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-train"></i>
  </span>
  <span>Paris</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Budapest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Bucharest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Istanbul</span>
  <span class="icon">
    <i class="fas fa-flag-checkered"></i>
  </span>
</span>

icon-text는 inline-flex 요소이기 때문에, 문단 텍스트 안에 쉽게 넣을 수 있어요.

Example

<div class="content">
  <p>
    An invitation to
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-utensils"></i>
      </span>
      <span>dinner</span>
    </span>
    was soon afterwards dispatched; and already had Mrs. Bennet planned the
    courses that were to do credit to her housekeeping, when an answer arrived
    which deferred it all. Mr. Bingley was obliged to be in
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-city"></i>
      </span>
      <span>town</span>
    </span>
    the following day, and, consequently, unable to accept the honour of their
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-envelope-open-text"></i>
      </span>
      <span>invitation</span>
    </span>
    , etc.
  </p>
</div>

icon-text는 div 태그를 사용하면 flex 요소로도 바꿀 수 있어요.

Example

<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information</span>
</div>

<p class="block">
  Your package will be delivered on <strong>Tuesday at 08:00</strong>.
</p>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</div>

<p class="block">Your image has been successfully uploaded.</p>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</div>

<p class="block">
  Some information is missing from your <a href="#">profile</a> details.
</p>

<div class="icon-text">
  <span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</div>

<p class="block">
  There was an error in your submission. <a href="#">Please try again</a>.
</p>

색상 (Colors)

아이콘 폰트는 단순히 텍스트이기 때문에, 색상 헬퍼를 사용해서 아이콘의 색을 바꿀 수 있어요.

Example

<span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
  <i class="fas fa-ban"></i>
</span>

icon-text에도 똑같이 적용할 수 있어요.

Example

<span class="icon-text has-text-info">
  <span class="icon">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Info</span>
</span>

<span class="icon-text has-text-success">
  <span class="icon">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</span>

<span class="icon-text has-text-warning">
  <span class="icon">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</span>

<span class="icon-text has-text-danger">
  <span class="icon">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</span>

크기 (Sizes)

Bulma의 icon 컨테이너는 4가지 크기로 제공돼요. 항상 담고 있는 아이콘보다 약간 커야 해요. 예를 들어 Font Awesome 5 아이콘은 기본적으로 1em의 폰트 크기를 사용하지만(font-size를 상속받기 때문에), 추가적인 크기도 제공해요.

Font Awesome 변형 (Variations)

Font Awesome은 다음을 위한 수정자 클래스도 제공해요.

• 고정 너비 아이콘 (fixed width)
• 테두리 아이콘 (bordered)
• 애니메이션 아이콘 (animated)
• 스택 아이콘 (stacked)

<span class="icon is-medium">
  <span class="fa-stack fa-sm">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>

<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
  </span>
</span>

Material Design Icons

icon 컨테이너를 Material Design Icons와 함께 사용하는 방법이에요.

MDI도 다음을 위한 수정자 클래스를 제공해요.

• 라이트/다크 아이콘
• 회전 및 뒤집힌 아이콘

Ionicons

icon 컨테이너를 Ionicons와 함께 사용하는 방법이에요.

Sass와 CSS 변수

더 알아보기 (Learn more)

• Image 요소
• Button 요소