Finding and Changing Cloud Icon in Dropify

Issue

I've been looking over a script (by Jeremy Fagis) called Dropify to create a drag and drop file input. It works beautifully, but I would like to locate and change the default cloud icon in it. I've looked through the JS and CSS files, but cannot locate where it coming/loading from:

Does anyone have any idea where the cloud icon is loading from in the scripts/CSS below?

Here is the CSS:

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

Main JS:

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

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

Solution

It's an icon from a custom font called Dropify

---

It's set through CSS in the ::before selector of the .file-icon class, within .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;
}

---

Update

You can probably set your own icon by overwriting the CSS font-family and content attributes with your own font css library, such as FontAwesome.

Answered By - Jeffrey Roosendaal