Dropify中云图标的发现与变化

Question

我一直在查看一个名为Dropify的脚本(由Jeremy编写)，以创建一个拖放文件输入。它工作得很好，但我想找到并更改其中的默认云图标。我查看了JS和CSS文件，但无法找到它从何处来/加载：

​

​

有人知道在下面的脚本/CSS中从哪里加载云图标吗？

下面是CSS：

组件/dist/css/disify.min.css

主要联合材料：

组件/dist/js/disify.min.js

补充联合材料：

<script>
$(document).ready(function() {
    // Basic
    $('.dropify').dropify({
        messages: {
            'default': 'Click or drag and drop a photo',
            'replace': 'Click or drag and drop to replace',
            'remove':  'Remove',
            'error':   'Error. The file is either not square, larger than 2 MB or not an acceptable file type'
        }
    });
    // Used events
    var drEvent = $('#input-file-events').dropify();
    drEvent.on('dropify.beforeClear', function(event, element) {
        return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
    });
    drEvent.on('dropify.afterClear', function(event, element) {
        alert('File deleted');
    });
    drEvent.on('dropify.errors', function(event, element) {
        console.log('Has Errors');
    });
    var drDestroy = $('#input-file-to-destroy').dropify();
    drDestroy = drDestroy.data('dropify')
    $('#toggleDropify').on('click', function(e) {
        e.preventDefault();
        if (drDestroy.isDropified()) {
            drDestroy.destroy();
        } else {
            drDestroy.init();
        }
    })
});
</script>

Answer 1

它是一个来自自定义字体Dropify的图标

它是通过CSS在::before类的.file-icon选择器中在.dropify-wrapper中设置的。

HTML：

<div class="dropify-wrapper">
    <div class="dropify-message">
        <span class="file-icon">
            ::before <-- Here
        </span> 
        <p>Drag and drop a file here or click</p>
    </div>
    ...
</div>

CSS：

.dropify-font-upload:before, .dropify-wrapper .dropify-message span.file-icon:before {
    content: '\e800';
}
.dropify-font:before, .dropify-wrapper .dropify-message span.file-icon:before, .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon:before, [class*=" dropify-font-"]:before, [class^=dropify-font-]:before {
    font-family: dropify;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-left: .2em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
}

更新

您可能可以通过用自己的字体CSS库(如font-family )覆盖css font-family和content属性来设置自己的图标。