引言
再网上看到bootstrap-fileinput这个项目可以轻松的写出漂亮的文件输入样式,而该项目低版本与bootstrap的兼容性不是很好,搞版本却使用了bootstrap-4,bootstrap-4不再支持字体图标,fileinput中却使用了字体图标。以下将介绍找的的解决方案。
解决思路
下载bootstrap-3的字体图标放在本地,自定义写bootstrap-icon.css文件。
pom文件的内容如下
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.7.RELEASE</version>
<relativePath/><!-- look up from repository -->
</parent>
<groupId>com.footprint</groupId>
<artifactId>webdemo</artifactId>
<version>1.0-SNAPSHOT</version>
<name>webDemo</name>
<description>A simple web</description>
<properties>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
<bootstrap-fileinput.version>4.4.8</bootstrap-fileinput.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- spring boot 推荐使用 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars.bower/bootstrap-fileinput 会自动引入bootstrap, jquery的对应版本 -->
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>bootstrap-fileinput</artifactId>
<version>${bootstrap-fileinput.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
文件夹目录
bootstrap-inco.css的内容
@font-face {
font-family: 'Glyphicons Halflings';
src: url('fonts/glyphicons-halflings-regular.eot');
src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before