Icon
#Table of Contents
#Detail
アイコンの装飾をサポートするエレメント CSS。
#Basic
Selector | Description |
---|
.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>
Darkest | Dark 1 | Dark 2 | Dark 3 | Dark 4 | Dark 5 | Dark 6 | Dark 7 | Dark 8 | Dark 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>
Brightest | Light 1 | Light 2 | Light 3 | Light 4 | Light 5 | Light 6 | Light 7 | Light 8 | Light 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>
Primary | Info | Success | Warning | Danger |
---|
.is-primary | .is-info | .is-success | .is-warning | .is-danger |
#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>
Modifier | Description |
---|
.is-fit | アイコンセレクターに付与するとアイコンの幅が 1em に揃います。 |
#Variables
- 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