Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by James White
James White
6,159 Points

Bootstrap icons don't display

I was trying to get an icon to show up on a button in the Simple RoR app but couldn't get it. So I just put it in the index.html.erb file to see if it would show up and it doesn't.

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

I put it in a regular html document and it did show up.

Is there something special that needs to be done to get the bootstrap icons to show up when using Rails?

Thanks!

[ed. note:] Added markdown to fix code formatting

7 Answers

James White
James White
6,159 Points

I fixed this by installing the twitter-bootstrap-rails gem. I read that the asset pipeline for the icons can get messed up if you just import the css files directly into the app. So I deleted them, installed the gem, and refreshed and it all worked!

Jake Duncan
Jake Duncan
2,969 Points
Jake Duncan
Jake Duncan
2,969 Points

How have you included bootstrap to your webpage?

Make sure the img, js and css directories are included correctly.

Mark Flavin
Mark Flavin
10,199 Points
Mark Flavin
Mark Flavin
10,199 Points

Can you post a link to the page. As Jake said it sounds like your not including the bootstrap assets properly.

James White
James White
6,159 Points
James White
James White
6,159 Points

The icon file is in project_name/app/assets/images. I've got bootrap.css included. Is there another bootstrap file I need to include?

Then I included the "<i>" tag from my original post.

eta: Yeah, I don't know how to use markdown.

James White
James White
6,159 Points
James White
James White
6,159 Points

I think I just realized what the problem is. I have to change the url for the background-image in the css for the location of the icons. But I think I've done that correctly and it still isn't showing up. I'll keep playing with it.

James White
James White
6,159 Points
James White
James White
6,159 Points

I can't get this lol.

I added the .png in project_name/app/assets/images. My css is in project_name/app/assets/stylesheets.

The background-image url in the css is "../images/glyphicons-halflings.png.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

James White - Rock on with your bad self. :guitar:

I love it when people solve their own issues, and then share the love, and tell the rest of us.