CODEWITHSUNDEEP
htmljquerykendo-uikendo-ui-angular2kendo-upload
sirushti
sirushti

Reputation: 147

How do i add fontawesome icon to Kendo UI upload button

I want to add font awesome icon to Kendo UI Upload Button

HTML Code :

<div class="row row-border lopUploadSet">
        <div class="col-md-4 col-sm-12">
            <input type="hidden" name="DocFileType" id="DocFileType1" value="14" />
            <div class="lopUploadLabel">
                <span>1</span>
                Driver's License
            </div>
        </div>
         <div class="col-md-5 col-sm-12 lopUploadInput"><input type="file" name="files" id="files1" class="clsfiles" />
         
         </div>
         <div class="col-md-3 col-sm-12">
            <a href="#" id="notes-toggle" class="lopUploadAddNotes"><i class="bi bi-chat-left-quote"></i> Add Notes</a>
        </div>
        <div class="col-12 form-group notes-view" id="notes-box">
                <textarea class="form-control" placeholder="Add Notes" id="Note1" name="Note" rows="3"></textarea>
        </div>
    </div>

Generated Code :

<div class="col-md-5 col-sm-12 lopUploadInput"><div class="k-widget k-upload k-upload-async k-upload-empty"><div class="k-dropzone"><div class="k-button k-upload-button" aria-label="Select files"><input type="file" name="files" id="files1" class="clsfiles" data-role="upload" multiple="multiple" autocomplete="off"><span>Select files</span></div><em class="k-dropzone-hint">Drop files here to upload</em></div></div>
         
         </div>

enter image description here

Upvotes: 1

Views: 3508

Answers (2)

Sixteen
Sixteen

Reputation: 563

Another possible way is to create a font-face for FontAwesome font and replace kendo icons by the FontAwesome icon you want to use.

First, you need to download the .otf for the icon gallery you want to use (Light for example). Store it in a folder inside your app and create a css font-face.

styles.scss

/* Font Awesome */
@font-face {
    font-family: 'FontAwesome Light';
    src: url('./assets/fonts/Font Awesome 5 Pro-Light-300.otf');
}

Then you'll be able to overwrite kendo's icons by overwriting their css classes. For example, if you want to overwrite the Kendo filter icon with the FontAwesome filter icon, use this

styles.scss

.k-i-filter::before {
    content: '\f0b0';
    font-family: 'FontAwesome Light';
}

You can find the unicode in the FontAwesome documentation for earch icon see this example

Now, each time you use the Kendo filter icon, it will be replaced by the FontAwesome filter icon. So in your case, use

<button kendoButton icon="filter"></button>

Upvotes: 1

jpllosa
jpllosa

Reputation: 2202

As your questions says - How do i add fontawesome icon to Kendo UI upload button. First, add the font awesome CSS <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />. Second, put <i class="fab fa-accusoft"></i> between your button tags. Now your upload button has a font awesome icon. Try the code below in the Telerik Dojo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-v2.min.css"/>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
</head>
<body>
  
<style>
  .k-clear-selected,
  .k-upload-selected {
    display: none !important;
  }
</style>

<input name="files" id="files" type="file" />
<button id="uploadAll" class="k-button"><i class="fab fa-accusoft"></i>Start upload</button>
<script>

  $(document).ready(function() {
    $("#files").kendoUpload({
      async: {
        autoUpload: false,
        saveUrl: "http://my-app.localhost/save",
        removeUrl: "http://my-app.localhost/remove"
      }
    });

    $("#uploadAll").on('click', function(e){
      e.preventDefault();

      var upload = $("#files").data("kendoUpload");
      upload.upload();
    })
  });
</script>
</body>
</html>

Upvotes: 1

Related Questions