Twitter 引导图标不显示 - 我做错了什么？答案

【问题标题】：Twitter bootstrap icons don't show up - what am i doing wrong?Twitter 引导图标不显示 - 我做错了什么？
【发布时间】：2012-09-19 04:36:14
【问题描述】：

我是新手，请帮忙;-)

我构建了一个小型 RoR Web 应用程序，我正在尝试使用 twitter bootstrap.js 框架。

我几乎可以完成所有工作，但显示的图标应该是 glyphicons-halflings-white.png 或 glyphicons-halflings.png 。

我的文件夹结构非常简单，标准的 RoR 项目，我将 png 文件放在 /app/assets/images/ 下，当我查看 bootstrap.css 文件时，我看到：

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

和

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

根据我的文件夹结构应该是正确的。

在我的 html 代码中，我有类似的东西：

<div class="btn-group">
    <button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

我使用<i class="icon-tag"></i> 来显示标签图标（或希望看到它）

不过，没有任何效果

由于未知原因，我在文件夹中看不到任何图标。我试图查看如果我简单地将../images/glyphicons-halflings.png 复制到浏览器地址 url 是否可以看到 png 文件，但是，当 url指向：localhost:3000/images/glyphicons-halflings.png

我的 html 响应如下所示：

<!DOCTYPE html>
<html>
<head>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.1.8.20.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.extentions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/select2.js?body=1" type="text/javascript"></script>
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

  <meta content="authenticity_token" name="csrf-param" />
<meta content="c+czIHCNmepmx674gKldijipFRD9348Gw+R2SAlrpow=" name="csrf-token" />
  <link rel="SHORTCUT ICON" href="/images/favicon.ico">
</head>
<body>
<script src="/assets/jquery.validate.js?body=1" type="text/javascript"></script>
<script src="/assets/jit-yc.js?body=1" type="text/javascript"></script>
<script src="/assets/graphcontrol.js?body=1" type="text/javascript"></script>
<script src="/assets/excanvas.js?body=1" type="text/javascript"></script>

<!--[if IE]><script language="javascript" type="text/javascript" src="/assets/excanvas.js"></script><![endif]-->

<h1>Sandbox#hello</h1>

<div class="btn-group">
    <button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>



<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.dropdown-toggle').dropdown();
    });

</script>
</body>
</html>

我做错了吗？我需要强制 ruby 正确部署这些 *.png 文件吗？

任何建议都会有所帮助。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap icons

【解决方案1】：

我遇到了类似的问题，所以我这样做了：

<i class="icon-shopping-cart glyphw" id="cart"></i>

css

.glyphw{
    background-image: url(/assets/glyphicons-halflings-white.png);
}

【讨论】：

为什么即使图像在 assets/images 下而不是直接在项目中的 /assets/ 下，它仍然有效？ rails 是否实际上将子文件夹中的所有内容移动到 /assets/ ？

【解决方案2】：

只需使用密切维护的 bootstrap-sass gem (https://github.com/thomas-mcdonald/bootstrap-sass) 即可省去所有麻烦。

【讨论】：

【解决方案3】：

    @font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=3.0.1');
  src: url('fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

只需在 font-awesome.css 中正确设置字体目录

【讨论】：

【解决方案4】：

我用于此类问题的解决方案（供应商脚本尝试在 /img 中查找资产， /images 是将这些请求重定向到 assets 文件夹。在routes.rb 添加：

  get '/img/:name', to: redirect {|params, req| "/assets/#{params[:name]}.#{params[:format]}" }

【讨论】：

【解决方案5】：

我在我的项目中使用 Twitter 引导程序，这太棒了。获取图标的语法是：

<i class="icon icon-tag"></i>

第一个 CSS 类“icon”是制作图标的标签，第二个类“icon-tag”是显示图标图像。

【讨论】：