2012-09-19 41 views
2

我是一個新手,所以請幫助;-)Twitter引導程序圖標不顯示 - 我做錯了什麼?

我建立一個小的RoR Web應用程序,我試圖使用twitter bootstrap.js框架。

我幾乎所有的工作,但顯示圖標應該是glyphicons-halflings-white.png或glyphicons-halflings.png。

我的文件夾結構非常簡單,標準的回報率的項目,在這裏我把PNG文件在/應用/資產/圖像/,而當我一起來看看在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指向時,我得到「沒有路由匹配[GET]」/images/glyphicons-halflings.png「 :本地主機:3000 /圖片/ 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> 

難道我做錯了什麼我是否需要強制紅寶石部署的正確* .png文件? ?

任何意見是有幫助的

回答

4

我也有類似的問題,所以我這樣做:

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

CSS

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

爲什麼這項工作甚至雖然圖像是在資產/圖像下,而不是直接在項目中的/ assets /下嗎?rails是否實際上將子文件夾中的所有內容移動到/ assets /? – Ayrad

+0

是的,它確實...... –

-1

我使用Twitter引導到我的項目,這真棒。得到一個圖標的語法是:

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

第一個CSS類「icon」就是讓像一個圖標和第二課堂「icon-tag」標籤是顯示的圖標圖像。

0
@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

0

解決方法我用了這些類型的問題(其中vendor腳本試圖找到資產/img/images是那些請求重定向到assets文件夾中routes.rb地址:

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