Replace Kendo UI icons with FontAwesome icons

kendo-to-fontawesome.scss

/*
 * kendo icon overrides
 * NOTE: the purpose of this is to remap kendo ui icons in the interface to their fontawesome counterpart
 * TODO: icon sprites replaced by icon font in newer kendo releases (v4.7+)
 * * * * * * * * * * * * * * * * */

// NOTE: list syntax - kendo icon | fa icon | fa icon code
$icons:
    k-i-arrow-e  fa-caret-right   \f0da,
    k-i-arrow-n  fa-caret-up      \f0d8,
    k-i-arrow-s  fa-caret-down    \f0d7,
    k-i-arrow-w  fa-caret-left    \f0d9,
    k-i-collapse fa-minus-square  \f146, // NOTE: kendo icon points down+right
    k-i-expand   fa-plus-square   \f0fe,
    k-i-seek-e   fa-step-forward  \f051,
    k-i-seek-w   fa-step-backward \f048;
    
// github.com/sass/sass/issues/1395
@function preserve-hex($hex) {
  @return unquote("\"")+$hex+unquote("\"");
}

%kendo-icon-override {
    background: none;
    font-size: 12px;

    &,
    &:before {
        height: 1em;
        line-height: 1em;
        width: 1em;
    }

    &:before {
        display: block;
        font-family: FontAwesome;
    }
}

.k-icon {
    
    // set necessary properties on globbed selectors
    @each $icon in $icons {

        &.#{nth($icon, 1)} {
            // extend selector into icon override base style
            @extend %kendo-icon-override;
    
            // define icon glyph
            &:before {
                content: preserve-hex(nth($icon, 3));
            }
        }
    }
}