0 
<i class="icon-search"></i>

试图将上述行放在谷歌应用引擎中。显然，它不起作用，因为我没有将图像文件链接到 app.yaml 文件。app.yaml 文件已包含以下代码：

- url: /static/images/(.*\.(gif|ico|jpeg|jpg|png))
  static_files: static/images/\1
  upload: static/images/(.*\.(gif|ico|jpeg|jpg|png))

我应该怎么做才能使用 Twitter Bootstrap 图标？

4

4 回答 4

3

您所要做的就是正确指出 Bootstrap 附带的两个精灵图像在哪里。

如果您使用的是 LESS，请在以下内容中找到这些行variables.less：

@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

并将它们更改为以下内容：

@iconSpritePath:          "/static/images/glyphicons-halflings.png";
@iconWhiteSpritePath:     "/static/images/glyphicons-halflings-white.png";

如果这些图像位于static/images目录中。

否则，如果您使用的是 CSS 版本的 Bootstrap，那么只需找到对这些图像的引用并输入正确的路径：

background-image: url("../img/glyphicons-halflings.png"); 
...
background-image: url("../img/glyphicons-halflings-white.png");
于 2013-03-15T08:41:46.190 回答
0

你的CSS看起来不错？这就是我正在使用的东西

- url: /img/(.*\.(gif|png|jpg))
  static_files: static/img/\1
  upload: static/img/(.*\.(gif|png|jpg))

- url: /css
  static_dir: static/css

- url: /js
  mime_type: text/javascript
  static_dir: static/js

然后这应该工作等

<i class="icon-search icon-white"></i>
于 2013-03-15T08:47:23.753 回答
0

我需要再添加一个步骤，以使 Lipis 的答案对我有用。

我的 bootstrap.css 文件中的第 2285 行最初如下所示，但图标仍然没有出现。

background-image: url("../img/glyphicons-halflings.png");

然后我把这个相对路径改成绝对路径，如下图，图标立马出现了！

background-image: url("http://www.mywebsite.com/img/glyphicons-halflings.png");

至于为什么相对路径没有正确解析，那是明天的事情。同时，至少绝对路径解决方案适用于我（也许也适用于其他人）。

非常感谢 Lipis，为您提供上述解决方案。

于 2013-03-30T13:38:48.367 回答
0

这个话题很老，但也许有人正在寻找类似问题的答案。就我而言，添加就足够了

- url: /fonts
  static_dir: fonts

在 app.yaml 中并保留 bootstrap.css 原样。Glyphicons 应该自然地位于根目录的字体文件夹中。

于 2018-01-26T20:38:55.597 回答