Bootstrap3 - Glyphicons没有在Chrome中显示，只有 [英] Bootstrap3 - Glyphicons are not displayed in Chrome, only

问题描述

奇怪的是，没有Bootstrap3 glyphicons的在Chrome V31的显示（显示小方块）。但是，在FF V26，V18歌剧，Safari浏览器V5.1和IE V10罚款。此外，在Android的4.x的正常工作 - Chrome和FF

Strangely, none of Bootstrap3 glyphicons are displaying in Chrome v31(displays a small square). But, works fine in FF v26, Opera v18, Safari v5.1 and IE v10. Also, works fine in Android 4.x - Chrome and FF.

用简单的code下测试：＆LT;跨度类=glyphicon glyphicon调整＆GT;＆LT; / SPAN＆GT;

Tested with simple code: <span class="glyphicon glyphicon-adjust"></span>

请帮忙。感谢很多提前！

Please help. Thanks much in advance!

环境：Windows 8.0

Environment: Windows 8.0

推荐答案

而不是解决您的问题，我preFER教你如何解决你自己的问题。

Rather than fix your problem, I prefer to teach you how to fix your own problem.

1. 右键单击该元素并选择检查元素。这将弹出一个窗口，显示你对HTML而这适用于它的CSS一些有用的信息。


2. 如果这是一个精灵图像（如引导2），看看右手边的CSS，寻找最顶层（UN-打叉的）背景图片。见精灵图像的URL。如果它是一个glyphicon（如引导3），查找 FONT-FAMILY 代替。


3. 转至网络选项卡。您可能需要刷新页面以获得有用的东西在那里。


4. 查找它加载的精灵形象或字体（如glyphicons-半身-regular.woff）。如果它说，它具有304状态，这意味着它是从缓存加载。在这种情况下，清除缓存和重新加载页面可能会解决你的问题。


5. 如果它不是一个304的状态，你可能有一个问题，即Web服务器不提供了形象（404或类似的状态），或者不来正确出于某种原因。


6. 如果清除缓存没有解决的问题，请点击的URL网络选项卡上的精灵图像或字体，然后点击preVIEW选项卡。你应该看到的是，包含你的图标和所有其他图标，或在字体的字母数字字符块图像。如果这不是你所看到的，同样有可能出错了你的Web服务器提供的。


7. 如果精灵形象是正确的，那么有可能出错了你的CSS，你会意外地覆盖了精灵的背景位置。再次，回到你的元素标签，看看系统产生的CSS。

1. Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
2. If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
3. Go to the Network tab. You may need to refresh the page to get useful stuff there.
4. Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
5. If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
6. If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
7. If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.

这篇关于Bootstrap3 - Glyphicons没有在Chrome中显示，只有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！