logo标签列表

3.0.0版本中如何使用Bootstrap Glyphicons？

twitter-bootstrapiconsglyphicons
18
我正在使用Bootstrap中的Glyphicons。我以前是从http://glyphicons.getbootstrap.com/css/bootstrap-glyphicons.css直接调用CSS，但这个网页已经消失，并且不建议这样做。
这显然与Twitter再次将Glyphicons放入Bootstrap程序包中有关。 我正在使用Bootstrap 3.0.0 RC1或RC2版本。
我的问题：我不知道如何在自己的主机上使用这些图标......看起来代码包含在bootstrap.css中（？）。我已上传了"fonts"目录，但只得到空白的盒子图标，而不是正确的图标。
请问有什么建议吗？应该放哪里，如何调用？
我认为自定义工具中存在一个错误。如果我从主页链接下载完整的Bootstrap，图标会正确显示。但是如果我下载自定义版本，我只会看到小的空白框。 - Steve
看起来这可能是问题的根源：https://github.com/twbs/bootstrap/issues/9925 - OZ_
4个回答
10

bootstrap-glyphicons.css文件似乎已经在最终/生产的Bootstrap 3.0.0中被移除了。只需从http://getbootstrap.com/下载zip文件，然后将dist/css/bootstrap.min.css文件复制到您的css文件夹中。然后，您应该将其包含在HTML页面中，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Glyphicons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS file -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head>
  <body>

    <!-- Glyphicon in a H1 tag -->
    <h1>Hello, <span class="glyphicon glyphicon-globe"></span> !</h1>

  </body>
</html>

来源：http://getbootstrap.com/getting-started/

7

如果您已经将字体放入字体目录中，现在调用图标的方法是 <span class="glyphicon glyphicon-pencil"></span> 而不是 <i class="icon-large icon-pencil"></i>。

4
是的，我已经放置好了字体目录，并使用了那种图像调用方式。但是我得到的只是空白方框图标，我不明白为什么。据我所知，唯一的不同之处在于我将我的Bootstrap CSS文件存储在不同的文件夹中（/public_html/wp-content/themes/bs3theme/css/rc2/），而字体位于/public_html/wp-content/themes/bs3theme/fonts/ - 但我已经在bootstrap.css中更改了文件路径。 - Robert Andrews
你在 bootstrap-glyphicons.css 中更改了哪个 URL？可能是 404 问题。我希望你已经在 HTML 中包含了该文件。你有这一行代码吗？<link href="/public_html/wp-content/themes/bs3theme/bootstrap-glyphicons.css" rel="stylesheet"> - mrkre
不，我在我的Bootstrap 3.0.0下载中没有看到bootstrap-glyphicons.ss...“dist”文件夹包含一个“css”文件夹，其中只有四个.css文件 - bootstrap.css（和minified）和bootstrap-theme.css（不是我的）（和minified）。bootstrap-glyphicons.css也不在“fonts”目录中。 - Robert Andrews
抱歉，请忽略我之前的评论。最新推送已经移除了对glyphicons.css的需要。只需从github更新您的css，然后使用<span class ="glyphicon glyphicon-pencil"> </ span>即可。请注意BS仍处于RC2阶段，因此预计会有很多变化。 - mrkre
你能让它正常工作吗？Bootstrap 3 刚在 GitHub 上发布，你需要更新你的文件。 - mrkre
显示剩余5条评论
3

请确保您的字体文件夹相对于.css文件放置正确：../fonts

some-root-folder
├--my-css-folder
|  └--bootstrap.min.css
└--fonts
   └--glyphicons-halflings-regular.ttf
我该如何更改字体文件夹的位置？ - Will Hardwick-Smith
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接