Question

我想在FineUploader的<em>添加Font Awesome Icon和其他样式（例如qq-drop-area-text）。这可能吗？看起来文本使用CSS content区域进行样式设置。

FineUploader的HTML示例：

<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here!">...</div>

所需：

<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="<span class='fa fa-upload'></span> Drop files <em>here</em>!">...</div>

由于

Answer 1

.qq-uploader:before {
    /*content: attr(qq-drop-area-text) " ";*/
    font-family: FontAwesome, 'Open Sans', Arial;
    content: "\f0c5  Drop files here";
    position: absolute;
    font-size: 200%;
    left: 0;
    width: 100%;
    text-align: center;
    top: 45%;
    opacity: 0.25;
}

这是我的例子，f0c5是我想要使用的Font Awesome图标的Unicode值。在这种情况下，它是fa-files-o图标。单击Font Awesome list of icons上的任何图标以显示其Unicode值。

Answer 2

要向dropzone消息添加更多样式，只需在项目的CSS文件中包含以下内容：

.qq-uploader:before {
   // dropzone text styles go here
}

如何在FineUploader中的qq-drop-area-text中添加HTML？

2 个答案: