new*_*bie 3 ruby-on-rails twitter-bootstrap glyphicons
我正试图让一个Glyphicon出现在Rails应用程序中使用Bootstrap,但我无法弄清楚如何让它显示.我已经阅读了几个问题,试图通过修复路径来解决这个问题.然而,经过那些问题/答案后,我仍然被困在b/c上,不会出现glyphicon.
图像和样式表都位于相同的"Assets"目录中.当我检查Chrome中的元素时,我正在使用的HTML似乎正常工作,它正在找到适当的类,它正在链接到Bootstrap样式表.
HTML:
<p><%= link_to raw('<i class="icon-share-alt"></i>'), post %></p>
CSS(默认从Bootstrap EXCEPT我更新/ img到/ images b/c这是我的images目录被调用):
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../images/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
还有一条评论可能有所帮助.当我检查Chrome上的元素并将鼠标悬停在inspect元素部分右栏中的"../ images/glyphics ..."时,Chrome引用localhost:3000/assets /../ images/glyphicons-halflings.png as路径,这不是我的应用程序的根目录的正确路径.我怀疑这只是Chrome中的简写,但是,再一次,他们似乎不会引用正确的路径,除非这是我问题的根源.也就是说,我仍然不知道如何解决它.
我假设您正在使用Rails 3.1或更高版本,因为您提到了"assets"文件夹,它是Rails的Asset Pipeline功能的一部分.简而言之,您放置在rails项目基础的"app/assets"文件夹中的任何内容都将自动路由到assets服务器上的文件夹.例如:
your_app/app/assets/stylesheets/style.css >>> localhost:3000/assets/style.cssyour_app/app/assets/images/button.png >>> localhost:3000/assets/button.pngyour_app/app/assets/javascripts/script.js >>> localhost:3000/assets/script.js换句话说,rails允许您在源文件夹中组织文件,但是将它们组合在一起以供assets文件夹中的最终用户使用.有关Asset Pipeline的更多信息,请参阅Ruby on Rails指南:Asset Pipeline.
你的问题是你的CSS对rails一无所知,当它的代码在浏览器中被解释时,它会在assets文件夹中看到它自己.您拥有的其他图像和javascripts也是如此.最简单的解决方案是url("../images/glyphicons-halflings.png");改为url("/assets/glyphicons-halflings.png");.这是有效的,因为assets在浏览器中查看时,CSS文件和图像都会在文件夹中看到对方.
第二种解决方案是使用sass-rails gem.如果您使用默认方法生成应用程序,则可能会在Gemfile中找到它.如果是这种情况,那么您可以将CSS文件重命名something.css为something.css.scss(或者.css.sass,我更喜欢前者).这将允许您使用rails对SASS的内置支持,具体如下:
background: image-url("glyphicons-halflings.png");
### Outputs: background: url(/assets/glyphicons-halflings.png);
image-url在rails应用程序的.css.scss文件中使用该命令将负责查找图像并输出正确的文件夹.
第三种选择是使用twitter-bootstrap-rails gem,它与Rails 3.1或更高版本中的资产管道兼容.