Add FontAwesome Icon to Upload Button

[John]

How can I add a FontAwesome Icon to the Upload Button?  I'm using the tag helper for the upload control.

 

<kendo-upload drop-zone="drop-zone1" name="Input.RegulationDocument" multiple="false">
    <async auto-upload="true" />
    <validation allowed-extensions="@Model.AllowedExtensions" />
    <localization select="Upload PDF..." clear-selected-files="Remove PDF" />
</kendo-upload>

[Dimitar]

Hello John,

In general, the web version of the FontAwesome 5 could be integrated along with Telerik UI for ASP.NET Core as follows:

1) Reference the required stylesheet in the application layout:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" >

2) Apply the following styles patch in order to ensure that the FontAwesome icons are correctly displayed when added as part of a Telerik UI widget markup:

<style>
    .far.k-sprite,
    .fas.k-sprite,
    .far.k-sprite::before,
    .fas.k-sprite::before {
        font-size: 1em;
    }
</style>

Integrating a FontAwesome icon in the Upload button currently can be achieved via JS:

<kendo-upload id="upload" drop-zone="drop-zone1" name="Input.RegulationDocument" multiple="false">
    <async auto-upload="true" />
    <localization select="Upload PDF..." clear-selected-files="Remove PDF" />
</kendo-upload>

<script>
    $(document).ready(function () {
        var upload = $("#upload").getKendoUpload();
        upload.wrapper.find(".k-upload-button").prepend("<i class='fas fa-home'></i>")
    });
</script>

Regards,
Dimitar
Progress Telerik

[John]

Great answer.  Thanks!