i’m a newbie, so please help 😉
I build a small RoR web application where i’m trying to use the twitter bootstrap.js framework.
i got almost everything to work but showing the icons which should be coming glyphicons-halflings-white.png or glyphicons-halflings.png .
my folders structure is pretty simple, the standard RoR project, where i put the png files under /app/assets/images/, and when i take a look on the bootstrap.css files i see:
background-image: url("../images/glyphicons-halflings-white.png");
and
background-image: url("../images/glyphicons-halflings.png");
which should be correct according to my folder structure.
In my html code i have something like that:
<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>
where i use the <i class="icon-tag"></i> to show a tag icon (or hope to see it)
Though, nothing is working
for unknown reason, i can’t see any icons on my folder. i was trying to see if i can see the png files if i simple copy the ../images/glyphicons-halflings.png to the browser address url, though, i get “No route matches [GET] “/images/glyphicons-halflings.png” when the url points to: localhost:3000/images/glyphicons-halflings.png
my html response looks like this:
<!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>
Am i doing anything wrong? do i need to force ruby to deploy those *.png files correctly?
Any advise would be helpful.
I had a similar problem so i did this:
css