v7.1.0

Icon

Table of Contents

Detail

アイコンの装飾をサポートするエレメント CSS。

Basic

SelectorDescription
.icon, .im, .fa, .fas, .far, .fal, .fab, .material-iconsアイコン装飾の起点として使えるセレクター。

Dark

.is-dark-(value) 形式のモディファイアをアイコンセレクターに付与すると黒アイコンを表現。(value) を省略すると最も濃く、1 > 9 の順に薄くなります。

(value) は Color の値を引き継いでいます。

<i aria-hidden="true" class="fas fa-adjust is-dark"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-1"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-2"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-3"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-4"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-5"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-6"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-7"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-8"></i>
<i aria-hidden="true" class="fas fa-adjust is-dark-9"></i>
DarkestDark 1Dark 2Dark 3Dark 4Dark 5Dark 6Dark 7Dark 8Dark 9
.is-dark.is-dark-1.is-dark-2.is-dark-3.is-dark-4.is-dark-5.is-dark-6.is-dark-7.is-dark-8.is-dark-9

Light

.is-light-(value) 形式のモディファイアをアイコンセレクターに付与すると白アイコンを表現。(value) を省略すると最も濃く、1 > 9 の順に薄くなります。

(value) は Color の値を引き継いでいます。

<i aria-hidden="true" class="fas fa-adjust is-light"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-1"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-2"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-3"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-4"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-5"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-6"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-7"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-8"></i>
<i aria-hidden="true" class="fas fa-adjust is-light-9"></i>
BrightestLight 1Light 2Light 3Light 4Light 5Light 6Light 7Light 8Light 9
.is-light.is-light-1.is-light-2.is-light-3.is-light-4.is-light-5.is-light-6.is-light-7.is-light-8.is-light-9

Role

.is-(role) 形式のモディファイアをアイコンセレクターに付与すると、各役割毎のカラーリングに変化します。

<i aria-hidden="true" class="fas fa-angle-left"></i>
<i aria-hidden="true" class="fas fa-check is-primary"></i>
<i aria-hidden="true" class="fas fa-info-circle is-info"></i>
<i aria-hidden="true" class="fas fa-save is-success"></i>
<i aria-hidden="true" class="fas fa-exclamation-triangle is-warning"></i>
<i aria-hidden="true" class="fas fa-times is-danger"></i>
PrimaryInfoSuccessWarningDanger
.is-primary.is-info.is-success.is-warning.is-danger

Fit

Fit
<i aria-hidden="true" class="fas fa-angle-left is-fit"></i>
<i aria-hidden="true" class="fas fa-check is-primary is-fit"></i>
<i aria-hidden="true" class="fas fa-info-circle is-info is-fit"></i>
<i aria-hidden="true" class="fas fa-save is-success is-fit"></i>
<i aria-hidden="true" class="fas fa-exclamation-triangle is-warning is-fit"></i>
<i aria-hidden="true" class="fas fa-times is-danger is-fit"></i>
ModifierDescription
.is-fitアイコンセレクターに付与するとアイコンの幅が 1em に揃います。

Variables

Name
Default Value
  • Name
    $selector-icon
    Default Value
    .icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons
  • Name
    $selector-icon-svg
    Default Value
    svg.icon
  • Name
    $selector-icon-material
    Default Value
    .material-icons
  • Name
    $modifier-icon-dark
    Default Value
    .is-dark
  • Name
    $modifier-icon-dark-1
    Default Value
    .is-dark-1
  • Name
    $modifier-icon-dark-2
    Default Value
    .is-dark-2
  • Name
    $modifier-icon-dark-3
    Default Value
    .is-dark-3
  • Name
    $modifier-icon-dark-4
    Default Value
    .is-dark-4
  • Name
    $modifier-icon-dark-5
    Default Value
    .is-dark-5
  • Name
    $modifier-icon-dark-6
    Default Value
    .is-dark-6
  • Name
    $modifier-icon-dark-7
    Default Value
    .is-dark-7
  • Name
    $modifier-icon-dark-8
    Default Value
    .is-dark-8
  • Name
    $modifier-icon-dark-9
    Default Value
    .is-dark-9
  • Name
    $modifier-icon-light
    Default Value
    .is-light
  • Name
    $modifier-icon-light-1
    Default Value
    .is-light-1
  • Name
    $modifier-icon-light-2
    Default Value
    .is-light-2
  • Name
    $modifier-icon-light-3
    Default Value
    .is-light-3
  • Name
    $modifier-icon-light-4
    Default Value
    .is-light-4
  • Name
    $modifier-icon-light-5
    Default Value
    .is-light-5
  • Name
    $modifier-icon-light-6
    Default Value
    .is-light-6
  • Name
    $modifier-icon-light-7
    Default Value
    .is-light-7
  • Name
    $modifier-icon-light-8
    Default Value
    .is-light-8
  • Name
    $modifier-icon-light-9
    Default Value
    .is-light-9
  • Name
    $modifier-icon-primary
    Default Value
    .is-primary
  • Name
    $modifier-icon-info
    Default Value
    .is-info
  • Name
    $modifier-icon-success
    Default Value
    .is-success
  • Name
    $modifier-icon-warning
    Default Value
    .is-warning
  • Name
    $modifier-icon-danger
    Default Value
    .is-danger
  • Name
    $modifier-icon-fit
    Default Value
    .is-fit
  • Name
    $icon-dark
    Default Value
    $convert-dark
  • Name
    $icon-dark-1
    Default Value
    $convert-dark-1
  • Name
    $icon-dark-2
    Default Value
    $convert-dark-2
  • Name
    $icon-dark-3
    Default Value
    $convert-dark-3
  • Name
    $icon-dark-4
    Default Value
    $convert-dark-4
  • Name
    $icon-dark-5
    Default Value
    $convert-dark-5
  • Name
    $icon-dark-6
    Default Value
    $convert-dark-6
  • Name
    $icon-dark-7
    Default Value
    $convert-dark-7
  • Name
    $icon-dark-8
    Default Value
    $convert-dark-8
  • Name
    $icon-dark-9
    Default Value
    $convert-dark-9
  • Name
    $icon-light
    Default Value
    $convert-light
  • Name
    $icon-light-1
    Default Value
    $convert-light-1
  • Name
    $icon-light-2
    Default Value
    $convert-light-2
  • Name
    $icon-light-3
    Default Value
    $convert-light-3
  • Name
    $icon-light-4
    Default Value
    $convert-light-4
  • Name
    $icon-light-5
    Default Value
    $convert-light-5
  • Name
    $icon-light-6
    Default Value
    $convert-light-6
  • Name
    $icon-light-7
    Default Value
    $convert-light-7
  • Name
    $icon-light-8
    Default Value
    $convert-light-8
  • Name
    $icon-light-9
    Default Value
    $convert-light-9
  • Name
    $icon-primary
    Default Value
    $convert-primary-strong
  • Name
    $icon-info
    Default Value
    $convert-info-strong
  • Name
    $icon-success
    Default Value
    $convert-success-strong
  • Name
    $icon-warning
    Default Value
    $convert-warning-strong
  • Name
    $icon-danger
    Default Value
    $convert-danger-strong
  • Name
    $icon-fit-width
    Default Value
    1em

Mixins

  • musubii-style-icon()
  • musubii-style-icon-svg()
  • musubii-style-icon-material()
  • musubii-style-icon-dark()
  • musubii-style-icon-dark-1()
  • musubii-style-icon-dark-2()
  • musubii-style-icon-dark-3()
  • musubii-style-icon-dark-4()
  • musubii-style-icon-dark-5()
  • musubii-style-icon-dark-6()
  • musubii-style-icon-dark-7()
  • musubii-style-icon-dark-8()
  • musubii-style-icon-dark-9()
  • musubii-style-icon-light()
  • musubii-style-icon-light-1()
  • musubii-style-icon-light-2()
  • musubii-style-icon-light-3()
  • musubii-style-icon-light-4()
  • musubii-style-icon-light-5()
  • musubii-style-icon-light-6()
  • musubii-style-icon-light-7()
  • musubii-style-icon-light-8()
  • musubii-style-icon-light-9()
  • musubii-style-icon-primary()
  • musubii-style-icon-info()
  • musubii-style-icon-success()
  • musubii-style-icon-warning()
  • musubii-style-icon-danger()
  • musubii-style-icon-fit()

Sources