css自制icon图标（最简单的一种方式）

前言

        近期在系统开发过程中，想在文件上传框下方增加一个公告类的图标，使用的是 element-ui组件库，去官网查了一下发现并没有 el-icon-notice 类型的公告图标（但是在 vant 与 vux 等移动端组件库中是有的），于是想着使用 css 来实现自制 icon 图标，其实自定义 icon 图标方式有好几种，但是笔者只使用了一种较为简单的方式，亲测有效，现分享给同行开发者们。

 

实现方式

步骤1：

        从网上下载自己喜欢的图标或者自制一个 logo 图标，将其放于项目的 /static/images 目录下（根据自己的需求放，也可以放在 assets 目录下，笔者是放在 /static/images 目录下），如下是我自己从网上下载的喇叭图标，图片命名为 notice.jpg：

步骤2：

        在 vue 页面中添加如下 html 代码 （el-icon-notice 就是我们自定义的一个图标名称）：

<div class="el-upload__tip" slot="tip">
    <i class="el-icon-notice"></i>
    Only file of Excel type permits and the size of this file can not exceed 10Mb
</div>

步骤3：

        在 vue 页面中继续添加如下的 css 代码：

.el-icon-notice {
    content: url('/static/images/notice.jpg');  //图标内容
    height: 20px;                               //图标的高度
    width: 25px;                                //图标的宽度
    margin-right: 10px;                         //图标与后面文字的距离
    vertical-align: -5px;                       //图标的纵向位置，目的是为了保持与提示文字
                                                  位于同一行
}

效果图：

完整代码：

<template>
    <el-dialog
        :visible.sync="visible"
        title="FILE UPLOAD"
        @close="close()"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="40%"
    >
        <el-upload
            class="upload"
            action="string"
            ref="uploadFile"
            :auto-upload="false"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :http-request="startUpload"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :before-upload="checkSizeAndType"
            accept=".xls,.xlsx"
            :limit="1"
            drag
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                Drag file here or<em>click here to upload</em>
            </div>
            <div class="el-upload__tip" slot="tip">
                <i class="el-icon-notice"></i>
                    Only file of Excel type permits and the size of this file can not exceed 10Mb
            </div>
        </el-upload>
        <el-row class="buttonStyle">
            <el-col :span="24">
                <el-button type="primary" size="mini" @click="submitUpload">SUBMIT
                </el-button>
                <el-button type="default" size="mini" plain @click="close()">CANCEL
                </el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script type="text/javascript">
export default {
    data() {
        return {
            fileList: [],
            fileNameShow: '',
            visible: true,
        }
    },
    mounted() {},
    methods: {
        handleExceed(files, fileList) {
            //文件个数超出限制提示
            this.$message.warning('Allowed uploading one file !')
        },
        handleRemove(file, fileList) {
            //删除上传文件
            this.fileNameShow = ''
            this.fileList = []
        },
        handleChange(file, fileList) {
            // 文件状态钩子，选择文件时触发
            this.fileList = fileList
            this.fileNameShow = file.name
        },
        //上传前检查文件的类型和大小
        checkSizeAndType(file) {
            //允许上传的Excel文件类型
            var allowedFileType = [
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-excel',
            ]
            if (allowedFileType.indexOf(file.type) == -1) {
                this.$msgbox({
                    title: 'SYSTEM PROMPT',
                    message: 'Illegal file type, please upload file of Excel type !',
                    type: 'error',
                })
                return false
            }
            if (file.size / 1024 / 1024 > 10) {
                this.$msgbox({
                    title: 'SYSTEM PROMPT',
                    message: 'The file size can not exceed 10 Mb !',
                    type: 'error',
                })
                return false
            }
            return true
        },
        submitUpload() {
            //提交上传文件
            if (this.fileList.length === 0) {
                this.$msgbox({
                    title: 'SYSTEM PROMPT',
                    message: 'Please select file first !',
                    type: 'error',
                })
            } else {
                //调文件上传钩子函数
                this.$refs.uploadFile.submit()
            }
        },
        startUpload(param) {},
        close() {},
    },
}
</script>

<style type="text/css">
.buttonStyle {
    text-align: right;
    margin-top: 30px;
}
.upload {
    margin-top: 20px;
    text-align: center;
}
.el-icon-notice {
    content: url('/static/images/notice.jpg');
    height: 20px;
    width: 25px;
    margin-right: 10px;
    vertical-align: -5px;
}
.el-upload-dragger{
    border: 2px dashed #b881d1
}
.el-upload__tip{
    color:#ff0000;
    font-size:12px
}
.el-upload-dragger .el-icon-upload{
    color:#b881d1
}
</style>

完整结果图：