13 #Icon Icon
13.1 #Icon.close Close icon
.sf-icon.-close
Html
<i class="sf-icon -close"></i>13.2 #Icon.colors Colors
.sf-icon.-{light, lighter, black, white, color-inherit}
Html
<i class="sf-fa sf-fa-folder-o sf-icon -light -size-xl"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -light"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -light -size-xs"></i>
<br />
<i class="sf-fa sf-fa-folder-o sf-icon -lighter -size-xl"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter -size-xs"></i>
<br />
<i class="sf-fa sf-fa-folder-o sf-icon -black -size-xl"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -black"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -black -size-xs"></i>
<div style="background-color: grey; color: pink; padding: 5px; max-width: 150px;">
<i class="sf-fa sf-fa-folder-o sf-icon -white -size-xl"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -white"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -white -size-xs"></i>
<br />
<i class="sf-fa sf-fa-folder-o sf-icon -color-inherit -size-xl"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit"></i>
<i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit -size-xs"></i>
</div>13.3 #Icon.illustrative Illustrative icons
.sf-icon.-illustrative
Html
<i class="sf-fa sf-fa-check-square-o sf-icon -illustrative"></i>
<i class="sf-fa sf-fa-user sf-icon -illustrative -size-3xl"></i>13.4 #Icon.sizes Icon sizes
.sf-icon.-size-{7xs, 4xs, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl}
-size-7xs — 5px
-size-4xs — 11px
-size-3xs — 12px
-size-2xs — 13px
-size-xs — 14px
-size-s — 16px
-size-m — 18px
-size-l — 20px
-size-xl — 22px
-size-2xl — 28px
-size-3xl — 36px
-size-4xl — 48px
-size-5xl — 60px
-size-4xs — 11px
-size-3xs — 12px
-size-2xs — 13px
-size-xs — 14px
-size-s — 16px
-size-m — 18px
-size-l — 20px
-size-xl — 22px
-size-2xl — 28px
-size-3xl — 36px
-size-4xl — 48px
-size-5xl — 60px
Html
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-7xs"></i>-size-7xs — 5px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xs"></i>-size-4xs — 11px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xs"></i>-size-3xs — 12px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xs"></i>-size-2xs — 13px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xs"></i>-size-xs — 14px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-s"></i>-size-s — 16px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-m"></i>-size-m — 18px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-l"></i>-size-l — 20px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xl"></i>-size-xl — 22px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xl"></i>-size-2xl — 28px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xl"></i>-size-3xl — 36px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xl"></i>-size-4xl — 48px<br />
<i class="sf-fa sf-fa-ellipsis-v sf-icon -size-5xl"></i>-size-5xl — 60px<br />13.5 #Icon.stacked Stacked icons
.sf-stack {.sf-stack__in,.sf-stack__out}
Html
<div class="sf-icon-stack">
<i class="sf-icon-stack__in sf-fa sf-fa-info sf-icon -size-3xs -white"></i>
<i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-l -black"></i>
</div>
<div class="sf-icon-stack">
<i class="sf-icon-stack__in sf-fa sf-fa-check sf-icon -size-2xs -light"></i>
<i class="sf-icon-stack__in sf-fa sf-fa-circle sf-icon -size-xl -black"></i>
<i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-2xl -light"></i>
</div>13.6 #Icon.text Icons with text
.sf-icon
Settings
Help
Folder
Help
Folder
Html
<i class="sf-fa sf-fa-sliders sf-icon"></i><span>Settings</span><br />
<i class="sf-fa sf-fa-question-circle sf-icon"></i><span>Help</span><br />
<i class="sf-fa sf-fa-folder-o sf-icon"></i><span>Folder</span><br />
<i class="sf-fa sf-fa-exclamation-circle sf-icon -exclamation"></i><br />