Icon

기본 사용

• 아이콘을 사용하기 위한 객체
• 사용 태그 : span

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

크기

• small, medium, large

<span class="gn-icon is-small">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-medium">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-large">
  <i class="fas fa-home"></i>
</span>

스타일

• circle, rect

<span class="gn-icon is-circle is-large">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-circle is-danger">
  <i class="fas fa-copy"></i>
</span>
<span class="gn-icon is-circle is-warning">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-rect">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-rect is-danger">
  <i class="fas fa-home"></i>
</span>
<span class="gn-icon is-rect is-warning">
  <i class="fas fa-box-open"></i>
</span>

색상

• success, warning, danger, info

<span class="gn-icon is-success">
  <i class="fas fa-check-circle"></i>
</span>
<span class="gn-icon is-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="gn-icon is-danger">
  <i class="fas fa-smoking-ban"></i>
</span>
<span class="gn-icon is-info">
  <i class="fas fa-info-circle"></i>
</span>
<span class="gn-icon is-disabled">
  <i class="fas fa-info-circle"></i>
</span>

role='button'인 경우 마우스포인터, hover 설정

<span class="gn-icon is-mono" role="button">
  <i class="fas fa-trash"></i>
</span>
<span class="gn-icon is-warning" role="button">
  <i class="fas fa-plus"></i>
</span>
<span class="gn-icon is-info" role="button">
  <i class="fas fa-thumbtack"></i>
</span>
<span class="gn-icon is-info" role="button">
  <i class="far fa-copy"></i>
</span>

<span class="gn-icon is-mono is-rect is-outline" role="button">
  <i class="fas fa-trash"></i>
</span>
<span class="gn-icon is-warning is-rect is-outline" role="button">
  <i class="fas fa-plus"></i>
</span>
<span class="gn-icon is-info is-rect is-outline" role="button">
  <i class="fas fa-thumbtack"></i>
</span>
<span class="gn-icon is-link is-rect is-outline" role="button">
  <i class="far fa-copy"></i>
</span>

국기아이콘

<span class="gn-flag ac">
</span>
<span class="gn-flag ko">
</span>
<span class="gn-flag us">
</span>
<span class="gn-flag jp">
</span>
<span class="gn-flag cn">
</span>

파일아이콘

<span class="gn-icon-ext"><span>TXT</span></span>
<span class="gn-icon-ext"><span>DOC</span></span>
<span class="gn-icon-ext"><span>GIF</span></span>
<span class="gn-icon-ext"><span>JPG</span></span>
<span class="gn-icon-ext is-large"><span>TXT</span></span>
<span class="gn-icon-ext is-large"><span>DOC</span></span>
<span class="gn-icon-ext is-large"><span>GIF</span></span>
<span class="gn-icon-ext is-large"><span>JPG</span></span>