One of the extensions I'm using (via Compass.app) is thomas-mcdonald-bootstrap-sass. I've modified it to use the Font-Awesome icon font which replaces and extends the standard twitter icon library, as well as to add an IcoMoon icon font for even more icons.
To add the icon fonts to the compass bootstrap extension, you need to specify the path to the font. In the instructions, you're told to put the absolute path to the font (such as "/fonts/fontawesome". But we don't want to do that, we want to have all relative paths in our files. If we don't include a beginning "/" in the $fontAwesomePath variable, then Compass will assume that the path is relative to the compass project's font directory (because of how the font-file function is coded).
The default font directory is the css directory plus "/fonts".
That made things awkward for using relative paths, so I did some digging and found a post where someone mentions using "font_dir" to configure the font directory path ... well, it's "fonts_dir", folks, not "font_dir".
To make a long story short, using the image-url function for my image paths, and trying to remove the absolute pathing by changing "http_path" to "" didn't work.
These are the settings in my config.rb that *did* work:
http_path = "./"
css_dir = "css"
sass_dir = "sass"
images_dir = "../img"
javascripts_dir = "js"
fonts_dir = "../fonts"
Of course you should modify that to use the same paths that you're using, such as "javascripts" and "stylesheets" instead of "js" and "css". Just make sure that you have "./" as the http_path and "../" in front of your images and fonts directory paths. When those are used, it's in the CSS context and your generated CSS file is going to end up in a directory that's parallel to them.
If somehow your final CSS file is in a different place, make sure that the images and fonts variables are changed accordingly.
No comments:
Post a Comment