如何在谷歌应用引擎中使用Twitter Bootstrap图标？

Question

<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图标呢？

Answer 1

我需要再加一步，让Lipis的答案对我有效。

我在bootstrap.css文件的第2285行原本是这样写的，但图标还是没有显示出来。

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

然后我把这个相对路径改成了绝对路径，结果图标立刻就出现了！

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

至于为什么相对路径没有正确解析，这个我明天再研究。现在，至少绝对路径的解决方案对我有效（也许对其他人也有效）。

非常感谢Lipis提供的这个解决方案。

Answer 2

你的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>

Answer 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这个文件夹里。

如果你使用的是Bootstrap的CSS版本，那就找到这些图像的引用，然后把路径改成正确的：

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