Bootstrap3轮播控件图标在服务器与本地显示不一致求助
2026-8-8
Bootstrap3轮播图标服务器端显示方块的解决方法
你遇到的问题是本地开发时Bootstrap3轮播的左右箭头图标显示正常，但部署到服务器后变成方块，这是因为Bootstrap依赖的Glyphicons字体文件未正确部署或路径配置出了问题，以下是具体解决步骤：
1. 检查字体文件是否已部署到服务器
Bootstrap3的Glyphicons图标依赖5个字体文件：
glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woffglyphicons-halflings-regular.woff2
这些文件默认应放在项目根目录的fonts文件夹下，和Bootstrap的CSS文件所在目录的相对路径为../fonts/，请确认服务器对应位置是否存在这些文件。
2. 验证CSS中的字体路径是否正确
打开项目引用的Bootstrap CSS文件，找到@font-face规则，示例如下：
@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.woff2') format('woff2'), 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'); }
确认url()中的路径和服务器上字体文件的实际位置匹配，如果项目部署在虚拟目录下，可能需要调整为绝对路径（比如/你的虚拟目录/fonts/xxx）。
3. 配置服务器的MIME类型（针对IIS等服务器）
部分服务器（如IIS）默认未配置字体文件的MIME类型，导致浏览器无法加载字体，需添加以下MIME类型：
- 扩展名
.eot，MIME类型application/vnd.ms-fontobject - 扩展名
.woff，MIME类型application/font-woff - 扩展名
.woff2，MIME类型font/woff2 - 扩展名
.ttf，MIME类型application/font-sfnt - 扩展名
.svg，MIME类型image/svg+xml
4. 确认发布时未排除字体文件
检查Visual Studio的发布设置，确保fonts文件夹被包含在发布内容中：
右键项目 -> 发布 -> 查看文件发布选项，确认fonts目录未被标记为排除。
你提供的轮播代码：
<div class="col-lg-5"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> --> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <table id="Report_InvHardCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;"> <caption>Hardware expiring 90 days out.</caption> <thead> <tr bgcolor="#a0bac4"> <th> @Html.LabelFor(model => model.Report_InvHardwareAggregateCat.FirstOrDefault().InvHardwareCatName) </th> <th> @Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().CountType) </th> </tr> </thead> <tbody> @foreach (var item in Model.Report_InvHardwareAggregateCat) { <tr> <td> @item.InvHardwareCatName </td> <td> @item.CountType </td> </tr> } </tbody> </table> </div> <div class="item"> <table id="Report_InvSoftCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;"> <caption>Software expiring 90 days out.</caption> <thead> <tr bgcolor="#a0bac4"> <th> @Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().InvSoftwareCatName) </th> <th> @Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().CountType) </th> </tr> </thead> <tbody> @foreach (var item in Model.Report_InvSoftwareAggregateCat) { <tr> <td> @item.InvSoftwareCatName </td> <td> @item.CountType </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> } </tbody> </table> </div> <div class="item"> <table id="Report_InvFurnitureCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;"> <caption>Furniture expiring 90 days out.</caption> <thead> <tr bgcolor="#a0bac4"> <th> @Html.LabelFor(model => model.Report_InvFurnitureAggregateCat.FirstOrDefault().InvFurnitureCatName) </th> <th> @Html.LabelFor(model => model.Report_InvFurnitureAggregateCat.FirstOrDefault().CountType) </th> </tr> </thead> <tbody> @foreach (var item in Model.Report_InvFurnitureAggregateCat) { <tr> <td> @item.InvFurnitureCatName </td> <td> @item.CountType </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> } </tbody> </table> </div> <div class="item"> <table id="Report_InvHardware_ByProdTypeByAmount-table" class="table table-striped styleTable table-hover" style="border:2px;"> <caption>Hardware category by cost.</caption> <thead> <tr bgcolor="#a0bac4"> <th> @Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().Name) </th> <th> @Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().CountInvProductTypeID) </th> <th> @Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().SumAmount) </th> </tr> </thead> <tbody> @foreach (var item in Model.Report_InvHardware_ByProdTypeByAmount) { <tr> <td> @item.Name </td> <td> @item.CountInvProductTypeID </td> <td> @item.SumAmountFormatted </td> </tr> } </tbody> </table> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="background-image: none;"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="background-image: none;"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
内容的提问来源于stack exchange，提问作者Acadia
相关产品推荐
相关产品推荐
