twitter-bootstrap Bootstrap 图标在本地加载，但在线时不加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19664287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap icons are loaded locally but not when online
提问by Jordan Axe
Basically I got the following HTML:
基本上我得到了以下 HTML：
<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>
Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:
在本地，图标在按钮上显示正常，但是当我在 Windows Azure 上运行时，我得到以下带有奇怪外观前缀的按钮，而不是图标：
Looking into this, I realized that when accessing my website locally the browser would attempt to load the file:
/Content/fonts/glyphicons-halflings-regular.woff (which it did successfully)
while when online (on azure) it would attempt to load at:
/fonts/glyphicons-halflings-regular.woff
考虑到这一点，我意识到当在本地访问我的网站时，浏览器会尝试加载文件：/Content/fonts/glyphicons-halflings-regular.woff（它成功了）而在线时（在 azure 上）它会尝试加载加载在：/fonts/glyphicons-halflings-regular.woff
Why does it not put the /Content prefix that it does locally.
为什么它不在本地放置 /Content 前缀。
I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.
我使用的是标准引导程序文件，它是在本地和在线运行的完全相同的网站。
Also I'm bundling the content the following way:
此外，我通过以下方式捆绑内容：
bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
"~/Content/bootstrap/bootstrap.css"));
And the file structure looks the following:
文件结构如下所示：
Also bootstrap is looking for the files like this:
bootstrap 也在寻找这样的文件：
url('../fonts/glyphicons-halflings-regular.woff')
So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.
所以我想它会在 Content 文件夹中而不是 root 中查找，因为它当前驻留在 Content/bootstrapcss 文件夹中。
回答by Gaurav Mantri-AIS
We recently had similar issue (though we were using metroUI- http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.
我们最近遇到了类似的问题（尽管我们使用的是metroUI- http://metroui.org.ua/）。本质上，事实证明我们捆绑了 css 文件，因此当我们在 Windows Azure 中部署应用程序时，没有加载任何字体。
In our case, we had the following directory structure:
在我们的例子中，我们有以下目录结构：
and modern.css was referencing fonts like
和 modern.css 正在引用字体，如
../fonts/iconFont.eot
and we were bundling the css file like this:
我们像这样捆绑了 css 文件：
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Because of bundling, the application was looking for fonts in /fontsdirectory at the application root which was obviously not there.
由于捆绑，应用程序正在/fonts应用程序根目录中寻找显然不存在的字体。
Long story short, we ended up changing the bundle name:
长话短说，我们最终更改了捆绑包名称：
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
"~/Content/css/modern.css",
"~/Content/css/modern-responsive.css"));
Once the bundle name was changed, things started working properly.
更改包名称后，事情就开始正常工作了。
回答by user2903379
Changing the path does work but the 'answered question' missed one vital point.
改变路径确实有效，但“已回答的问题”错过了一个关键点。
If you're using _Layout.cshtmlthat references the bundle, this will no longer work locally and on Azure.
如果你使用的_Layout.cshtml是引用包，这将不再在本地和 Azure 上工作。
You need to update the _Layout.cshtmlpage too!
您也需要更新_Layout.cshtml页面！
So if you change your bundles path from Content/cssto Scripts/cssthen you need to change _Layout.cshtmlto @Styles.Render("~/Scripts/css")respetively.
因此，如果您将捆绑包路径从更改为Content/css，Scripts/css则需要分别更改_Layout.cshtml为@Styles.Render("~/Scripts/css")。
回答by Goobiah_P
Encountered this error with ASP.NET Core 2.0 MVC web app when publishing to Azure Web Service.
发布到 Azure Web 服务时，ASP.NET Core 2.0 MVC Web 应用程序遇到此错误。
I had my stylesheets within the following code.
我的样式表包含在以下代码中。
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
Simply copying and pasting the links into any environment besides Development worked
只需将链接复制并粘贴到除开发工作之外的任何环境中
<environment exclude="Development">
<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
/>
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
回答by JoshYates1980
If you have downloaded a theme.zip or theme.rar that includes the bootstrap icons, before you extract do this:
如果您下载了包含引导程序图标的 theme.zip 或 theme.rar，请在解压缩之前执行以下操作：
- right click on the compressed package
- check the box "unblock" if it is visible
- 右键单击压缩包
- 如果可见，请选中“取消阻止”框
回答by cagedwhale
For icons to work- i had to set the folder permissions to "everyone = read" on the folder that the image was in
为了使图标起作用-我必须在图像所在的文件夹上将文件夹权限设置为“everyone = read”
