13.2 #Icon.colors Colors

Toggle example guides Toggle HTML markup

.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>