CSS Twitter 引导程序字形图标未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13849209/
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
Twitter bootstrap glyph icons are not loading
提问by ledgeJumper
This is such a dumb issue, but here we go anyway. Here is my basic structure
这是一个非常愚蠢的问题，但无论如何我们都在这里。这是我的基本结构
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
So Content and img are both in my root directory, so to referent the glyph image from my bootstrap.css file I have it like this:
所以 Content 和 img 都在我的根目录中，所以要从我的 bootstrap.css 文件中引用字形图像，我有这样的：
background-image: url("../../img/glyphicons-halflings.png");
Y U NO SHOW?
你没有表演？
Is there a .js file I need to check to make sure it is looking in the right directory??
是否有我需要检查的 .js 文件以确保它在正确的目录中查找？
oh and here is a snippet of where I am trying to get the image to render:
哦，这里是我试图让图像呈现的片段：
<td>
@if (item.Something == true)
{
<i class="icon-ok"></i>
}
else
{
<i class="icon-remove"></i>
}
</td>
UPDATE
更新
There's been a lot of views of this question, so I thought I would share my two cents on it. One note, since posting the question BS 3.0 is now out, so it is possible the structure is different and/or irrelevant, have not looked at it yet. But if you got here, keep in mind this is pre-3.0 Bootstrap.
这个问题有很多观点，所以我想我会分享我的两分钱。需要注意的是，由于发布问题 BS 3.0 现已发布，因此结构可能不同和/或无关，尚未查看。但是如果你到了这里，请记住这是 3.0 之前的 Bootstrap。
One thing I have started doing that makes it so I do not really have to mess with anything is bring the entire bootstrap folder into the project, rather than just the css/js/img folders. I typically put it in my root scripts folders with a structure like this:
我已经开始做的一件事是将整个 bootstrap 文件夹引入项目，而不仅仅是 css/js/img 文件夹。我通常将它放在我的根脚本文件夹中，其结构如下：
/scripts
/libs
/boostrap <-- the unzipped folder you get when downloading
/js
/css
/img
This may break some conventions since a 'scripts' folder should really just hold scripts. I justify it since I use the scripts folder for scripts (surprise!) and third party libraries (thus the libs folder). Most third party components you get have at least js and css files with them, and I just got too lazy to can them manually separated since some libraries (like bootstrap) rely on where the other files are.
这可能会打破一些约定，因为“脚本”文件夹实际上应该只保存脚本。我证明了这一点，因为我将脚本文件夹用于脚本（惊喜！）和第三方库（因此是 libs 文件夹）。您获得的大多数第三方组件至少都有 js 和 css 文件，我只是懒得手动分离它们，因为某些库（如引导程序）依赖于其他文件所在的位置。
Anyway, my two cents, take a look at the answers below if you want to alter the file locations. All great tips, thanks SO folks!
无论如何，我的两分钱，如果您想更改文件位置，请查看下面的答案。所有很棒的提示，谢谢大家！
采纳答案by 000
Your current code should technically work and there is no need of any jsfile..
您当前的代码在技术上应该可以工作，并且不需要任何js文件。
background-image: url("../../img/glyphicons-halflings.png");is perfectly fine for a directory structure like
background-image: url("../../img/glyphicons-halflings.png");非常适合像这样的目录结构
/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png
You may try this code below to ensure that things are fine..
您可以在下面尝试此代码以确保一切正常..
<td><i class="icon-ok"></i></td>
If this also fails then double check that glyphicons-halflings.pngexists at your said path alongwith sufficient privileges..
如果这也失败了，请仔细检查glyphicons-halflings.png是否存在于您所说的路径中以及是否有足够的权限。
回答by silvster27
I encountered this same issue and it is not related to the source or location of your glyphicons. This is a race issue. I unfortunately cannot tell you the reason why it behaves like this in tables... but I know in my dataTables this was occuring and my way around it was to add the glyphicons after the page and tables load by appending html. It's not perfect but it works.
我遇到了同样的问题，它与您的字形的来源或位置无关。这是种族问题。不幸的是，我无法告诉您它在表格中的行为的原因......但我知道在我的数据表中发生了这种情况，我的解决方法是在页面和表格加载后通过附加 html 添加字形。它并不完美，但它有效。
回答by Darnuhulu
This may be an old post but I hope it helps someone else looking for an answer to this problem.
这可能是一个旧帖子，但我希望它可以帮助其他人寻找这个问题的答案。
The file I downloaded contains an underscorebut the CSS is looking for a file with a dashbetween glyphicons and halflings. Change one or the other and make sure it is uploaded to the correct folder on your server.
我下载的文件包含一个下划线，但 CSS 正在寻找一个在字形和半身人之间有破折号的文件。更改其中一个并确保将其上传到服务器上的正确文件夹。
回答by HymanLB
- Copy the glyphicons-halflings.png & glyphicons-halflings-white.png From img Folder.
- make a sub-folder with name "img" in css folder.
- Paste the both glyphicons-halflings.png & glyphicons-halflings-white.png in css->img folder.
- Open your bootstrap stylesheet e.g. Let's Say bootstrap.css in text Editor.
Find (Ctrl+F) "icon". 6.You will find the class.
[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("../img/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat; }change the background image url to
background-image: url("img/glyphicons-halflings.png");- find "glyphicons-halflings-white.png"
- Change it's path also. And Bingo! you are on it.
- 从 img 文件夹复制 glyphicons-halflings.png 和 glyphicons-halflings-white.png。
- 在 css 文件夹中创建一个名为“img”的子文件夹。
- 将 glyphicons-halflings.png 和 glyphicons-halflings-white.png 粘贴到 css->img 文件夹中。
- 打开您的引导程序样式表，例如在文本编辑器中说 bootstrap.css。
找到（Ctrl+F）“图标”。6.你会找到课程。
[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("../img/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat; }将背景图片网址更改为
background-image: url("img/glyphicons-halflings.png");- 找到“glyphicons-halflings-white.png”
- 也改变它的路径。还有宾果！你在上面。
回答by Dave
I encountered this same problem today and it had me confused. As Rishi says above, it should work, but it just didn't. I triple-checked my directory structure. Then eventually I realised that it wasn't hitting my glyphicons file at all. I removed this offending line of css:
我今天遇到了同样的问题，这让我很困惑。正如 Rishi 上面所说，它应该可以工作，但它没有。我三重检查了我的目录结构。然后最终我意识到它根本没有击中我的字形文件。我删除了这个有问题的 css 行：
<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->
And everything was good!
一切都很好！
Remember that if you're going to include font-awesome, then it will look for the font files instead of the glyphicons file. So either add the appropriate fonts, or just use plain old bootstrap.
请记住，如果您要包含 font-awesome，那么它将查找字体文件而不是 glyphicons 文件。所以要么添加适当的字体，要么只使用普通的旧引导程序。
回答by Nav
The glyph icons load only when you have the following files in the fonts folder.
glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttfand glyphicons-halflings-regular.woff.
仅当字体文件夹中有以下文件时才会加载字形图标。
glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf和glyphicons-halflings-regular.woff。
Download the theme templateor the carousel templateof bootstrap, and you'll find these files there.
下载bootstrap的theme template或carousel template，你会在那里找到这些文件。
To know where to place these files in your web folder, just run Link Checkeror Xenu's link sleuthand it'll show you where to place those files.
要知道将这些文件放置在 Web 文件夹中的哪个位置，只需运行Link Checker或Xenu 的链接侦查器，它就会告诉您放置这些文件的位置。
回答by Zack
try this
尝试这个
background-image: url("/img/glyphicons-halflings.png");
background-image: url("/img/glyphicons-halflings.png");
I changed the path from a relative path to an absolute path. By adding the slash at the beginning of the path, it starts from the root of your site.
我将路径从相对路径更改为绝对路径。通过在路径的开头添加斜杠，它从站点的根目录开始。
Let me know if that works for you.
让我知道这是否适合您。
