如何将 fontawesome 图标添加到 Kendo UI 上传按钮

Question

我想为 Kendo 添加很棒的字体图标 UI 上传按钮

HTML代码：

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

生成的代码：

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

Answer 1

如您的问题所述 - 如何将 fontawesome 图标添加到 Kendo UI 上传按钮。首先，添加字体 awesome CSS <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />。其次，将 <i class="fab fa-accusoft"></i> 放在按钮标签之间。现在你的上传按钮有一个很棒的字体图标。在 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>

Answer 2

另一种可能的方法是为 FontAwesome 字体创建 font-face 并用您要使用的 FontAwesome 图标替换 kendo 图标。

首先，您需要为您要使用的图标库（例如 Light）下载 .otf。将其存储在应用程序内的文件夹中并创建 css font-face.

styles.scss

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

然后您将能够通过覆盖 css 类的图标来覆盖 kendo 的图标。例如，如果您想用 FontAwesome 过滤器图标覆盖 Kendo 过滤器图标，请使用此

styles.scss

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

您可以在搜索图标的 FontAwesome 文档中找到 unicode see this example

现在，每次使用 Kendo 过滤器图标时，它都会被 FontAwesome 过滤器图标取代。所以在你的情况下，使用

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

如何将 fontawesome 图标添加到 Kendo UI 上传按钮

How do i add fontawesome icon to Kendo UI upload button

html

jquery

kendo-ui

kendo-ui-angular2

kendo-upload