1

I'm trying to use these icons for my site. I already downloaded bootstrap, and have a bootstrap.css file. If I download all of bootstrap, it messes my site up, so I downloaded a customized version. I forgot to download the icons, so what I did was download a customized bootstrap with only the icons, and then copy and pasted that into my old bootstrap.css file. However, the icon I was trying to use didn't work.

So then what I did was I tried moving my old bootstrap.css file out of vendor/assets/stylesheets and into vendor/assets, and I put the new bootstrap.css file (with only the icons styling) into vendor/assets/stylesheets. When I did that, the icon still didn't show. So I removed the new bootstrap.css file, and I put the old one back into vender/assets/stylesheets. However... now none of the bootstrap styling works!!! I have no clue why that is!

I tried restarting my web server, clearing my cache, I checked to see if there is an assets folder in my public folder (because when there is I can't see css changes using localhost. something to do with compiling). None of it worked, and I still can't see any of the bootstrap styling in my localhost. When I use inspect element, I don't see the bootstrap styles being applied. I'm afraid to update the actual site, because I might loose the bootstrap styling. If you want me to update it so you can see it and help me and are confident that I won't lose the bootstrap styling, I'll trust you and do it. Let me know.

Error:

Sass::SyntaxError in Static_pages#home

Showing /Users/adamzerner/collegeanswerz/app/views/static_pages/home.html.erb where line #1 raised:

Invalid CSS after "...ground-position": expected ";", was ": center;"
  (in /Users/adamzerner/collegeanswerz/app/assets/stylesheets/home.css.scss)
Extracted source (around line #1):

1: <%= stylesheet_link_tag    "home", :media => "all" %>
2: <%= javascript_include_tag :application %>
3: <% provide(:title, 'Questions About College?  CollegeANSWERZ') %>
4: 
Rails.root: /Users/adamzerner/collegeanswerz

Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/bootstrap.css:1939
app/assets/stylesheets/home.css.scss:1
app/views/static_pages/home.html.erb:1:in `_app_views_static_pages_home_html_erb__737002310770935096_70160250580000'
Request

Parameters:

None
Show session dump

Show env dump

Response

Headers:

None
Adam Zerner
  • 17,797
  • 15
  • 90
  • 156
  • Just download a fresh bootstrap with glyph icons and put it in that stylesheets folder. – codedme Jul 27 '13 at 18:19
  • ok, I'll give that a shot. i gotta be careful though because adding certain things will mess up my site, so it'll be a few minutes. – Adam Zerner Jul 27 '13 at 18:20
  • you didn't copy the icons, did you? they're an image. https://github.com/twbs/bootstrap/tree/master/img you should use bootstrap properly and test it locally. – Eduard Gamonal Jul 27 '13 at 18:26
  • @codedme somehow that worked, thanks! I still don't know what went wrong before though. Out of curiosity, if you have an idea, let me know. Otherwise, don't worry about it. – Adam Zerner Jul 27 '13 at 18:35
  • @EduardGamonal you're right, I forgot to copy the icons! I tried copying the files that came with the downloaded bootstrap first into `vendor/assets/images`, and it still isn't working. How do I copy those files you linked to? Is it worth it, because the ones that came with bootstrap didn't work, so I suspect that there is an underlying problem. – Adam Zerner Jul 27 '13 at 18:36
  • the problem is, probably, that you aren't linking your files properly. it is not a bootstrap issue. – Eduard Gamonal Jul 28 '13 at 13:12

1 Answers1

1

If you are using ruby on rails, then you can use the bootstrap-sass gem.

gem 'bootstrap-sass'

and then start using it by adding

@import bootstrap;

to the css file under app/assets/stylesheets. You can have all the functions provided by bootstrap.

But if you still want the customized version, you can place the bootstrap css files under app/assets/stylesheets and javascript files under app/assets/javascripts and images under app/assets/images. You can download the missing images from bootstrap and then go to /img for the images.

EDIT: Looking at your error logs and the css you have provided in the comment. You have forgotten the semicolon after the background-image: url("glyphicons-halflings.png");

Sushil
  • 501
  • 7
  • 26
  • I tried downloading the gem initially, but it messed some things up, so I'd prefer the customized version. I tried putting the image files under `app/assets/images`, but that didn't change anything. Are you sure that I should put them in `app/assets`? It says here (http://guides.rubyonrails.org/asset_pipeline.html#asset-organization) to put it in `vendor/assets`? – Adam Zerner Jul 27 '13 at 19:20
  • This [link](http://stackoverflow.com/questions/13846932/how-to-include-twitter-bootstrap-in-my-rails-project-manually-without-using-any) will help you. – Sushil Jul 27 '13 at 19:28
  • Thank you, that was a great link! I still can't get it to work though :/. I tried multiple things, including this: `background-image: url("/assets/images/glyphicons-halflings.png");`, and it's not working! What is the correct path? I kept them in `app/assets/images`. – Adam Zerner Jul 27 '13 at 19:42
  • If it's inside app/assets/images then you can probably omit the /assets/images part. It would be: `background-image: url("glyphicons-halflings.png")` – Sushil Jul 27 '13 at 19:47
  • The things you can try: 1) Clear you browser cache 2) Restart server and try again. If nothing works then you can always use the gem. It is the best way to use the twitter-bootstrap. – Sushil Jul 27 '13 at 19:57
  • Still didn't work. I think it'd be better to just get the link right. If I use the gem, it'll mess everything else up, and I don't want that to happen. – Adam Zerner Jul 27 '13 at 20:04
  • Do you have `` when you browse the source of your website and *= require_tree . in your application.css? – Sushil Jul 27 '13 at 20:15
  • I don't have that the first thing but I do have require_tree – Adam Zerner Jul 27 '13 at 20:19
  • and where are the bootstrap.css files placed? If it's inside the app/assets/stylesheets, then you would have it included and the styles would be applied. – Sushil Jul 27 '13 at 20:23
  • it gave me an error on the background-repeat line: `[class*=" icon-"] { display: inline-block; width: 14px; height: 14px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("glyphicons-halflings.png") background-position: 14px 14px; background-repeat: no-repeat; margin-top: 1px; }` – Adam Zerner Jul 27 '13 at 20:27
  • Is the error inside your css file, or is it somewhere else. Can you post the complete error message? – Sushil Jul 27 '13 at 20:31
  • Your background-position css property is wrong. It must be something like: background-position: center. Refer to this [link](http://www.w3schools.com/cssref/pr_background-position.asp) – Sushil Jul 27 '13 at 20:39
  • I tried making it center and it gave me another error (I updated my edit). And I see what you're saying about it looking wrong, but that's what came with bootstrap.css... – Adam Zerner Jul 27 '13 at 20:44
  • so i see i was quite wrong, i just skimmed through the link but i just found out that you are placing css properties inside the views which is quite wrong. Place all the css styles inside the stylesheets files, in your case it is assets/stylesheets/static_pages.css.scss – Sushil Jul 27 '13 at 20:51
  • so what exactly should I put in `assets/stylesheets/static_pages.css.scss`? EDIT: I see what you're saying actually. I think that might be proper, but I don't want to mess things up. Don't worry about the images, I was just thinking and I only need it in one place, so it's not worth the trouble. Thanks for your help though! – Adam Zerner Jul 27 '13 at 20:54
  • first of all place all the styles in the assets/stylesheets folder including bootstrap and then copy the home.css.scss styles into static_pages.css.scss. You have to provide what you have written inside static_pages.css.scss after you copy it. – Sushil Jul 27 '13 at 20:59
  • 1
    You have forgot the semicolon after `background-image`. It should be: `background-image: url("glyphicons-halflings.png");` – Sushil Jul 28 '13 at 07:54
  • 1
    let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34325/discussion-between-sushilthe-and-adam-zerner) – Sushil Jul 28 '13 at 15:01