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

的自定义字体的图标

通过::before内.file-icon类的.dropify-wrapper选择器中的CSS进行设置：<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>：

HTML：

.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库（例如FontAwesome）覆盖CSS content和.background { height: 500px; background-color: #894325; background-image: -webkit-linear-gradient(-78deg, #894325 70%, #e9e9e9 30%); }属性来设置自己的图标。

在Dropify中查找和更改云图标

1 个答案: