Question

enter image description here 我在我的演示中使用了bootstrap fileinput插件，现在我可以将Multipartfiles上传到控制器然后存储在数据库中，但是图标丢失了。

<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css"
    href="${contextPath}/js/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
    href="${contextPath}/js/fileinput.min.css">
<link rel="stylesheet" type="text/css"
    href="${contextPath}/js/font-awesome.min.css">
<script src="${contextPath}/js/jquery-3.2.1.min.js"></script>
<script src="${contextPath}/js/bootstrap.min.js"></script>
<script src="${contextPath}/js/fileinput.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#fileinput1").fileinput({
            uploadUrl : '${contextPath}/user/uploadnotes2',
            showPreview : false,
            maxFilePreviewSize : 30720,
            maxFileCount : 1,
            allowedFileExtensions : [ "rar", "zip", "7z", "jpg", "png", "bmp" ]
        });
        $("#fileinput2").fileinput({
            uploadUrl : '${contextPath}/user/addsample2',
            maxFileCount : 1,
            allowedFileTypes : [ "image" ]
        });
    });
</script>

我用谷歌搜索但尚未找到解决方案。我错过了一些.css文件吗？上次我使用summernote时它的图标也丢失了，但是我导入了font-awesome.min.css来修复它。这次在fileinput部分，它没有用。

我不熟悉前端技巧，请帮帮我。谢谢大家。

Answer 1

在Bootstrap 4中删除了glyphicons图标字体，请参阅：https://getbootstrap.com/docs/4.0/migration/。

但您可以选择使用font-awesome主题，如下所述：http://plugins.krajee.com/file-theme-demo

Answer 2

还要感谢发表评论的两个人。我通过将所有引导程序包放入我的Web项目（在webapp中）来修复此问题。然后使用更详细的路径导入bootstrap.min.css。

<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css"
    href="${contextPath}/js/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">

Bootstrap fileinput插件，图标没有显示，如何解决？

2 个答案: