I've seen several questions asking something similar, but I can't get this font to render in my production app using a computer that doesn't have the font installed.
http://fortawesome.github.com/Font-Awesome/
Installed this: https://github.com/bokmann/font-awesome-rails
Added this:
*= require 'font-awesome'
to application.css
The icons ARE working, e.g.:
<i class="icon-envelope"></i>
correctly renders an envelope icon that is actually one of the font-awesome fonts. However, I can't get the alphabetic font to display in production (I just see Times New Roman). I've tried these instructions to no avail:
http://blog.fieldforceapp.com/moving-to-heroku-bootstrap-font-awesome
I'm concerned there may be a conflict with other css in my stylesheets directory (in app/assets/stylesheets):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require select2
*= require bootstrap-timepicker
*= require 'font-awesome'
*= require_tree .
*= require zpp.css
*/
Do I need a separate fonts directory? I'm running rake assets:precompile and see the font .css files moving into my public directory, but still no go.
Would love some help on this b/c I've been scratching my head for too long now. Thank you!
I'd make sure the css file points correctly to the font files..
as for the "alphabetic font", font awesome doesnt have a separate font for alpha numeric characters so if your default font is times new roman, that is what you would see..
Related
I just implemented Trix editor in my rails app and it works perfectly on localhost but is pulling this ugly business on Heroku:
I can only imagine this is to do with the asset pipeline, so the basics are that I did install the gem (gem 'Trix') and did bundle install, I added //= require trix in my application.js and *= require trix in my application.css.scss. My assets precompiled upon pushing things to Heroku.
Here's the entire application.css.scss structure:
*= require magnific-popup
*= require trix
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'ionicons';
Other than these basics, can anyone figure out what step I'm missing to get the styling to appear on Heroku?
There is a style being applied to a class .form-control that is setting height on that box at 34px. Which is why it does not grow with the text
When I remove the height property that the box gets then the box expands out around the text again. This can be kind of hard to find and fix from my end but it is located in a file application.css file inside a block with the same styles that this is surrounded by, probably not line 5 though, probably a later line but depends on file size, search for height: 34px or just 34px again or something and look for a block of styles like the one in the image here and remove that line (now keep in mind if this line is used as a style somewhere else then that will break).
That should fix the issue.
If you are not familiar with using chrome (or any browsers) dev tools I would recommend finding any reference and getting comfortable with using them, they are perfect for debugging this kind of thing.
I would like to know if it's possible to require some assets over HTTP, eg:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_tree .
*= require 'http://assets.domain.com/stylesheets/style.css'
*/
I get a Sprockets::FileNotFound error with this snippet.
Thank you
The Sprockets readme notes that require takes a path, and makes no reference to pulling things off HTTP.
The JurassicCoffee project for .NET appears to have added the ability to load files over HTTP.
Same question but with JS...
I'm trying to import a static javascript template into a basic rails app, so that I can then build more rails functionality with it (particularly with the backend).
Here is a window into some possibly related directories / files...
/app/assets/stylesheets/
application.css
base.css
blue.css
bootstrap-responsive.css
bootstrap-responsive.min.css
bootstrap.css
bootstrap.css.erb
bootstrap.css.scss
bootstrap.min.css
bootstrap_and_overrides.css.less
docs.css.less
fontawesome.css.erb
glyphicons.css
sprites.css.erb
/app/assets/stylesheets/application.css:
/* This is a manifest file that'll be compiled into application.css,
* which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
* lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can
* be referenced here using a relative path.
*
* You're free to add application-wide styles to this file
* and they'll appear at the top of the
* compiled file, but it's generally better to create a
* new file per style scope.
*
*= require formtastic-bootstrap
*= require_self
*= require_tree .
*/
/app/assets/fonts:
glyphicons readme.txt
glyphicons-regular.otf
glyphicons-regular.svg
glyphicons-regular.ttf
glyphicons-regular.woff
glyphiconshalflings-regular.eot
glyphiconshalflings-regular.otf
glyphiconshalflings-regular.svg
glyphiconshalflings-regular.ttf
I would be extremely grateful for any help at all, thank you so much!
=== UPDATE =====
As #m_x suggested, I needed to have my manifest file (i.e. application.css in the app --> assets --> stylesheets directory) match the order that files were referenced in the original template (in the index.html tag). Here is the new version:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
* add after glyph <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
*= require_self
*= require bootstrap.min.css
*= require bootstrap-responsive.min.css
*= require glyphicons.css
*= require google-fonts.css
*= require base.css
*= require blue.css
*/
=======
The above code was based on the index.html file from the template, the important part of which is as follows:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/glyphicons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href="css/base.css" rel="stylesheet">
<link href="css/blue.css" rel="stylesheet">
Note that I manually created a file to contain the css found in the 4th URL listed above (I named this css file "google-fonts.css"), because I wasn't sure how to reference a URL...
You have multiple files with the same name but different extensions. I'm not sure that erb, scss, less files won't overwrite the standard css during compilation, so this may be one cause of your issue.
Other than that, the problem most certainly stems from the fact that require_tree includes files in the order it finds them on the filesystem. This means that, in your case, bootstrap-responsive.css may get included before bootstrap.css (depends on your filesystem). As you know, the order in which files are included is very important for both stylesheets and scripts.
There are two main solutions to force the order of inclusion :
instead of require_tree, use require <filename> as described in the guides and include each file manually, in any order you want (i.e. the order you included them in the head before using the asset pipeline). To ease management and tidy your folder, you can split your assets into different folders ; if you create a manifest named index in a folder, using require <folder_name> will include this manifest. That's what i usually do.
Some people prefer prefixing each file with a number, e.g. 01_bootstrap.css, 02_bootstrap-responsive.css, etc. I never used this approach but AFAIK it seems to work.
Here's my application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap
*= require bootstrap-responsive
*= require style
For some reason none of my css styles are being applied. When I view source and open application.css, the file is exactly the same. It's not compiling it. The application.js is compiling just fine!
my gemfile: https://gist.github.com/1748054
Any ideas?
EDIT: Fixed it by adding */
Make sure you have:
# Enable the asset pipeline
config.assets.enabled = true
set in your config/application.rb
Also this is a bit of a shot in the dark but don't you need to have a line like this:
*=require_self
before anything else. I always use sass imports to include my stylesheets with more precision. So mine would look like this:
/*
*= require_self
*/
#import "bootstrap.css";
#import "bootstrap-responsive.css";
#import "style.css";
Then just make sure your file is named application.css.scss
I see that in development environment in rails 3.1 the css are loaded in alphabetic order and not in the order I want. I want a particular css file to be at the end so it over-writes any styles given to the class before. How can we achieve that?
You can actually do something like:
/*
*= require 'reset'
*= require_self
*= require_tree .
*/
in your application.css file. This allows you to specify any number of stylesheets, such as a reset, to come before the tree without having to specify each individual file. The single quotes around reset are optional.
Not trying to resurrect an old thread, just thought this might be helpful for some.
It is better to specify the order of each and every files manually:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require reset
*= require groups
*= require the_last
*