引言
再網上看到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 {content: "\2a"; } .glyphicon-plus:before {content: "\2b"; } .glyphicon-euro:before, .glyphicon-eur:before {content: "\20ac"; } .glyphicon-minus:before {content: "\2212"; } .glyphicon-cloud:before {content: "\2601"; } .glyphicon-envelope:before {content: "\2709"; } .glyphicon-pencil:before {content: "\270f"; } .glyphicon-glass:before {content: "\e001"; } .glyphicon-music:before {content: "\e002"; } .glyphicon-search:before {content: "\e003"; } .glyphicon-heart:before {content: "\e005"; } .glyphicon-star:before {content: "\e006"; } .glyphicon-star-empty:before {content: "\e007"; } .glyphicon-user:before {content: "\e008"; } .glyphicon-film:before {content: "\e009"; } .glyphicon-th-large:before {content: "\e010"; } .glyphicon-th:before {content: "\e011"; } .glyphicon-th-list:before {content: "\e012"; } .glyphicon-ok:before {content: "\e013"; } .glyphicon-remove:before {content: "\e014"; } .glyphicon-zoom-in:before {content: "\e015"; } .glyphicon-zoom-out:before {content: "\e016"; } .glyphicon-off:before {content: "\e017"; } .glyphicon-signal:before {content: "\e018"; } .glyphicon-cog:before {content: "\e019"; } .glyphicon-trash:before {content: "\e020"; } .glyphicon-home:before {content: "\e021"; } .glyphicon-file:before {content: "\e022"; } .glyphicon-time:before {content: "\e023"; } .glyphicon-road:before {content: "\e024"; } .glyphicon-download-alt:before {content: "\e025"; } .glyphicon-download:before {content: "\e026"; } .glyphicon-upload:before {content: "\e027"; } .glyphicon-inbox:before {content: "\e028"; } .glyphicon-play-circle:before {content: "\e029"; } .glyphicon-repeat:before {content: "\e030"; } .glyphicon-refresh:before {content: "\e031"; } .glyphicon-list-alt:before {content: "\e032"; } .glyphicon-lock:before {content: "\e033"; } .glyphicon-flag:before {content: "\e034"; } .glyphicon-headphones:before {content: "\e035"; } .glyphicon-volume-off:before {content: "\e036"; } .glyphicon-volume-down:before {content: "\e037"; } .glyphicon-volume-up:before {content: "\e038"; } .glyphicon-qrcode:before {content: "\e039"; } .glyphicon-barcode:before {content: "\e040"; } .glyphicon-tag:before {content: "\e041"; } .glyphicon-tags:before {content: "\e042"; } .glyphicon-book:before {content: "\e043"; } .glyphicon-bookmark:before {content: "\e044"; } .glyphicon-print:before {content: "\e045"; } .glyphicon-camera:before {content: "\e046"; } .glyphicon-font:before {content: "\e047"; } .glyphicon-bold:before {content: "\e048"; } .glyphicon-italic:before {content: "\e049"; } .glyphicon-text-height:before {content: "\e050"; } .glyphicon-text-width:before {content: "\e051"; } .glyphicon-align-left:before {content: "\e052"; } .glyphicon-align-center:before {content: "\e053"; } .glyphicon-align-right:before {content: "\e054"; } .glyphicon-align-justify:before {content: "\e055"; } .glyphicon-list:before {content: "\e056"; } .glyphicon-indent-left:before {content: "\e057"; } .glyphicon-indent-right:before {content: "\e058"; } .glyphicon-facetime-video:before {content: "\e059"; } .glyphicon-picture:before {content: "\e060"; } .glyphicon-map-marker:before {content: "\e062"; } .glyphicon-adjust:before {content: "\e063"; } .glyphicon-tint:before {content: "\e064"; } .glyphicon-edit:before {content: "\e065"; } .glyphicon-share:before {content: "\e066"; } .glyphicon-check:before {content: "\e067"; } .glyphicon-move:before {content: "\e068"; } .glyphicon-step-backward:before {content: "\e069"; } .glyphicon-fast-backward:before {content: "\e070"; } .glyphicon-backward:before {content: "\e071"; } .glyphicon-play:before {content: "\e072"; } .glyphicon-pause:before {content: "\e073"; } .glyphicon-stop:before {content: "\e074"; } .glyphicon-forward:before {content: "\e075"; } .glyphicon-fast-forward:before {content: "\e076"; } .glyphicon-step-forward:before {content: "\e077"; } .glyphicon-eject:before {content: "\e078"; } .glyphicon-chevron-left:before {content: "\e079"; } .glyphicon-chevron-right:before {content: "\e080"; } .glyphicon-plus-sign:before {content: "\e081"; } .glyphicon-minus-sign:before {content: "\e082"; } .glyphicon-remove-sign:before {content: "\e083"; } .glyphicon-ok-sign:before {content: "\e084"; } .glyphicon-question-sign:before {content: "\e085"; } .glyphicon-info-sign:before {content: "\e086"; } .glyphicon-screenshot:before {content: "\e087"; } .glyphicon-remove-circle:before {content: "\e088"; } .glyphicon-ok-circle:before {content: "\e089"; } .glyphicon-ban-circle:before {content: "\e090"; } .glyphicon-arrow-left:before {content: "\e091"; } .glyphicon-arrow-right:before {content: "\e092"; } .glyphicon-arrow-up:before {content: "\e093"; } .glyphicon-arrow-down:before {content: "\e094"; } .glyphicon-share-alt:before {content: "\e095"; } .glyphicon-resize-full:before {content: "\e096"; } .glyphicon-resize-small:before {content: "\e097"; } .glyphicon-exclamation-sign:before {content: "\e101"; } .glyphicon-gift:before {content: "\e102"; } .glyphicon-leaf:before {content: "\e103"; } .glyphicon-fire:before {content: "\e104"; } .glyphicon-eye-open:before {content: "\e105"; } .glyphicon-eye-close:before {content: "\e106"; } .glyphicon-warning-sign:before {content: "\e107"; } .glyphicon-plane:before {content: "\e108"; } .glyphicon-calendar:before {content: "\e109"; } .glyphicon-random:before {content: "\e110"; } .glyphicon-comment:before {content: "\e111"; } .glyphicon-magnet:before {content: "\e112"; } .glyphicon-chevron-up:before {content: "\e113"; } .glyphicon-chevron-down:before {content: "\e114"; } .glyphicon-retweet:before {content: "\e115"; } .glyphicon-shopping-cart:before {content: "\e116"; } .glyphicon-folder-close:before {content: "\e117"; } .glyphicon-folder-open:before {content: "\e118"; } .glyphicon-resize-vertical:before {content: "\e119"; } .glyphicon-resize-horizontal:before {content: "\e120"; } .glyphicon-hdd:before {content: "\e121"; } .glyphicon-bullhorn:before {content: "\e122"; } .glyphicon-bell:before {content: "\e123"; } .glyphicon-certificate:before {content: "\e124"; } .glyphicon-thumbs-up:before {content: "\e125"; } .glyphicon-thumbs-down:before {content: "\e126"; } .glyphicon-hand-right:before {content: "\e127"; } .glyphicon-hand-left:before {content: "\e128"; } .glyphicon-hand-up:before {content: "\e129"; } .glyphicon-hand-down:before {content: "\e130"; } .glyphicon-circle-arrow-right:before {content: "\e131"; } .glyphicon-circle-arrow-left:before {content: "\e132"; } .glyphicon-circle-arrow-up:before {content: "\e133"; } .glyphicon-circle-arrow-down:before {content: "\e134"; } .glyphicon-globe:before {content: "\e135"; } .glyphicon-wrench:before {content: "\e136"; } .glyphicon-tasks:before {content: "\e137"; } .glyphicon-filter:before {content: "\e138"; } .glyphicon-briefcase:before {content: "\e139"; } .glyphicon-fullscreen:before {content: "\e140"; } .glyphicon-dashboard:before {content: "\e141"; } .glyphicon-paperclip:before {content: "\e142"; } .glyphicon-heart-empty:before {content: "\e143"; } .glyphicon-link:before {content: "\e144"; } .glyphicon-phone:before {content: "\e145"; } .glyphicon-pushpin:before {content: "\e146"; } .glyphicon-usd:before {content: "\e148"; } .glyphicon-gbp:before {content: "\e149"; } .glyphicon-sort:before {content: "\e150"; } .glyphicon-sort-by-alphabet:before {content: "\e151"; } .glyphicon-sort-by-alphabet-alt:before {content: "\e152"; } .glyphicon-sort-by-order:before {content: "\e153"; } .glyphicon-sort-by-order-alt:before {content: "\e154"; } .glyphicon-sort-by-attributes:before {content: "\e155"; } .glyphicon-sort-by-attributes-alt:before {content: "\e156"; } .glyphicon-unchecked:before {content: "\e157"; } .glyphicon-expand:before {content: "\e158"; } .glyphicon-collapse-down:before {content: "\e159"; } .glyphicon-collapse-up:before {content: "\e160"; } .glyphicon-log-in:before {content: "\e161"; } .glyphicon-flash:before {content: "\e162"; } .glyphicon-log-out:before {content: "\e163"; } .glyphicon-new-window:before {content: "\e164"; } .glyphicon-record:before {content: "\e165"; } .glyphicon-save:before {content: "\e166"; } .glyphicon-open:before {content: "\e167"; } .glyphicon-saved:before {content: "\e168"; } .glyphicon-import:before {content: "\e169"; } .glyphicon-export:before {content: "\e170"; } .glyphicon-send:before {content: "\e171"; } .glyphicon-floppy-disk:before {content: "\e172"; } .glyphicon-floppy-saved:before {content: "\e173"; } .glyphicon-floppy-remove:before {content: "\e174"; } .glyphicon-floppy-save:before {content: "\e175"; } .glyphicon-floppy-open:before {content: "\e176"; } .glyphicon-credit-card:before {content: "\e177"; } .glyphicon-transfer:before {content: "\e178"; } .glyphicon-cutlery:before {content: "\e179"; } .glyphicon-header:before {content: "\e180"; } .glyphicon-compressed:before {content: "\e181"; } .glyphicon-earphone:before {content: "\e182"; } .glyphicon-phone-alt:before {content: "\e183"; } .glyphicon-tower:before {content: "\e184"; } .glyphicon-stats:before {content: "\e185"; } .glyphicon-sd-video:before {content: "\e186"; } .glyphicon-hd-video:before {content: "\e187"; } .glyphicon-subtitles:before {content: "\e188"; } .glyphicon-sound-stereo:before {content: "\e189"; } .glyphicon-sound-dolby:before {content: "\e190"; } .glyphicon-sound-5-1:before {content: "\e191"; } .glyphicon-sound-6-1:before {content: "\e192"; } .glyphicon-sound-7-1:before {content: "\e193"; } .glyphicon-copyright-mark:before {content: "\e194"; } .glyphicon-registration-mark:before {content: "\e195"; } .glyphicon-cloud-download:before {content: "\e197"; } .glyphicon-cloud-upload:before {content: "\e198"; } .glyphicon-tree-conifer:before {content: "\e199"; } .glyphicon-tree-deciduous:before {content: "\e200"; }

html頁面的引入

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>考試題庫整合</title><link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-icon.css}"><link rel="stylesheet" th:href="@{/webjars/bootstrap/4.5.0/dist/css/bootstrap.min.css}"><link rel="stylesheet" th:href="@{/webjars/bootstrap-fileinput/4.4.8/css/fileinput.min.css}"><script th:src="@{/webjars/jquery/3.5.1/dist/jquery.min.js}"></script><script th:src="@{/webjars/bootstrap/4.5.0/dist/js/bootstrap.min.js}"></script><script th:src="@{/webjars/bootstrap-fileinput/4.4.8/js/fileinput.min.js}"></script><script th:src="@{/webjars/bootstrap-fileinput/4.4.8/js/locales/zh.js}"></script> </head> <body><div class="row"><div class="col"><div class="file-loading"><input id="select-file" class="file" name="file" type="file" data-show-preview="true" data-language="zh"></div></div> </div></body> </html>

注意事項

@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'); }

css文件中的url地址，沒有使用bootstrap.css的原文件，其余內容為原文件。

總結

以上是生活随笔為你收集整理的springboot的fileinput-webjars的引入之bootstrap4不能使用字体图标（glyphicon）问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。