javascript - 在 Dropify 中查找和更改云图标

Question

我一直在查看一个名为 Dropify 的脚本(由 Jeremy Fagis 编写)创建拖放文件输入。它工作得很漂亮，但我想找到并更改其中的默认云图标。我查看了 JS 和 CSS 文件，但找不到它来自/加载的位置:

有人知道云图标是从下面的脚本/CSS 中的什么位置加载的吗？

这是 CSS:

http://www.wrappixel.com/demos/admin-templates/pixeladmin/plugins/bower_components/dropify/dist/css/dropify.min.css

主要 JS:

http://www.wrappixel.com/demos/admin-templates/pixeladmin/plugins/bower_components/dropify/dist/js/dropify.min.js

额外的 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 在 .file-icon 类的 ::before 选择器中设置的，在 .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 库(例如 FontAwesome)覆盖 CSS font-family 和 content 属性来设置您自己的图标。