使用简单的代码进行测试:
<span class="glyphicon glyphicon-adjust"></span>
请帮忙解决。非常感谢!环境:Windows 8.0
<span class="glyphicon glyphicon-adjust"></span>
请帮忙解决。非常感谢!我更喜欢教你如何解决自己的问题,而不是代替你解决问题。
background-image
。查看精灵图像的URL。如果它是一个glyphicon(如Bootstrap 3中),则查找font-family
。我曾经遇到过同样的问题。最简单的解决方案是直接从超链接导入CSS,不要下载它:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
问题在于CSS使用其他相对路径到其他文件。因此,您可以做两件事:
1. 下载所有相关路径。
2. 您可以简单地使用超链接(更容易)。
@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');
}
我和你有同样的问题:
bootstrap.min.css
文件。font
文件夹名称改为fonts
。看起来这是WebKit中的一个错误,已经在这里报告了:https://bugs.webkit.org/show_bug.cgi?id=76152
此外,GlyphIcons的创建者表示他知道这个问题,并将尝试在下一个版本中使用不同的Unicode值来解决这个问题:https://twitter.com/glyphicons/status/423426740128854016
因为文件类型限制,我在/wp-content中的.htaccess引起了错误。在将woff2添加到允许文件类型列表后,一切都恢复正常了。
# Protect /Wp-Content/
Order deny,allow
Deny from all
<Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
Allow from all
</Files>
我发现在检查bootstrap.min.css的CSS时,"fonts"目录位置添加了空格,这意味着它调用了不存在的文件,因为文件名中没有这些空格。例如,它列出了每一个:
../fonts/glyphicons-halflings-regular.eot
当它应该是:
../fonts/glyphicons-halflings-regular.eot
一旦我删除了空格,重新上传了CSS,清除了浏览器缓存,并重新加载(F5按钮),glyphicons终于显示出来了。在删除额外的空格之前,唯一有效的选项是Gines Hidalgo提供的通过超链接下载CSS。但是,发现删除额外的空格可以解决问题,这个选项就不再必要了。
这主要是Bootstrap版本问题,我只是添加了下面的URL。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
当字体响应头为"Content-Type:text/html; charset=UTF-8"时,Chrome v38+将无法显示Bootstrap图标,如果将响应头设置为"Content-Type:application/font-woff",则可以解决此问题。
确保在项目中除了 js, css
和其他文件夹之外,还有一个名为 fonts 的文件夹。
如果在项目中存在 fonts 文件夹,并且在 bootstrap.min.css
文件中的路径如下:../fonts/glyphicons
,即 fonts 文件夹不在 css 文件夹中,则一切都将正常工作。谢谢。
span
之间插入了:before
之外,没有发现任何明显的东西。请告诉我如何检查图标是否已加载。我不擅长UI,感觉有些困难... - lupchiazoem