I just started a new Grails project (Grails v2.4.2) and it is my first time using the Asset Pipeline plugin. I managed to get it working without much issue until I noticed the fonts were not displaying correctly.
I figured that the issue was the #font-face url in the css did not have the correct path. The only way that I could get it to work was to put the full path to the files into the css which was, for example:
src: url('/ProjectName/assets/fontawesome-webfont.eot');
The font files are all in the grails-app/assets/fonts folder and the css files are in the grails-app/assets/stylesheet folders.
Is there a better way to reference the font files from the css?
The issue for me was caused by a bug in the version of the Asset plugin that was bundled with Grails 2.4.2. This error will only show up for people using Windows PC's
Illegal character in path at index 0: \/../
Once I went from asset-pipeline:1.9.4 to asset-pipeline:1.9.6 the error went away
The error is discussed here:
Related
This is driving me nuts. This is should be simple - but I can't tell what I am doing wrong.
I have a plain old web site. Index.html, a css folder, images folder, fonts folder and js folder.
I am trying to add a font through the #font-face declaration.
I run the page locally and I get 404s for both the font file and the background image?
The paths are correct?
You are pointing to the wrong directory.
Try to add /../ before your path. Like:
src: url(/../fonts/in901xk.ttf)
This give an "step back" to the main directory and now can point to the "fonts" folder.
Other option to check this, for example in the case of images, is write the complete url that you think is the correct.If you can see the image, you will know what is the correct path that you should use in your src
We were able to solve the problem regarding the rendering of Fonts during release in VS2013.
The font urls in "app.css" and "style.css" fonts is pointing to a location for example "fonts/icomoon.eot" which technically it cannot find the specific path based on the directory browsing of the IIS.
We changed it by adding "/Content/stylesheets/" to all of the current font urls which would look like"/Content/stylesheets/fonts/icomoon.eot" and it WORKED.
However we still do not understand as to why debug mode was okay with the previous urls of our css files and fonts are rendering fine.
Can you suggest any fix? or is this fix of ours okay (manually editing the font-urls inside the css files)?
We have found a better solution for the font issues.
The asp.net bundling was the source as to why their was a different result between debug and release mode.
By default, if compilation is on debug mode, the bundling is turned off while if it is on release mode, it is turned on.
To fix that issue we have turned off the asp.net bundling while on release mode by adding this lines to BundleConfig.Cs.
BundleTable.EnableOptimizations = false;
What asp.net bundling does is it creates a virtual directory for all the css and js files. The problem is that it cannot find the path of the urls (specifically the fonts) inside the css files.
But another solution we have tried is:
bundles.Add(new StyleBundle("~/bundles/LayoutCss").Include(
"~/Content/stylesheets/style.css", new CssRewriteUrlTransform() )
.Include("~/Content/stylesheets/app.css", new CssRewriteUrlTransform() )
.Include("~/Content/bower_components/slick/dist/slick.css"));
So I compiled my SASS into one CSS file using codekit 2 on their own localhost and the website looks perfectly fine.
However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the SASS from my server leaving the compiles CSS it looses my fonts as well.
Does anyone know why is this?
Here is the website: http://bubbacue.nathanpatton.co.uk/
And the GitHub Repo for all the files: https://github.com/NathanPatton/Bubbacue
Your web host is generating a bunch of 403 Forbidden and 404 Not Found errors on the assets.
In Chrome, go to View, Developer, JavaScript Console and you'll see a list of the problem files and directories. Here is how to fix it.
I'm using Twitter Bootstrap 3.0 on a project. There's a fixed requirement of not hosting any files externally. But when I host the .css and .js files locally, the Glyphicons become corrupted.
Here's what it should look like:
Using bootstrap.min.css from the original CDN issues no errors, but placing the same file on the local server will affect the icons rendering, like in the image below:
It doesn't seem to matter if I download and save the original file using wget, DownThemAll, or open it on Firefox and use the "Save As" feature. It doesn't matter if the <link> href is href="/css/bootstrap.min.css, href="http://www.domain.com/css/bootstrap.min.css or href="http://www.domain.com/bootstrap.min.css.
My dev machine is running Linux. I can only use it to browse the site, both on my dev machine and in production. I'm using Firefox 26, but changing the value of security.fileuri.strict_origin_policy has no effect. As far as I can tell, the only difference that causes the render error is the CSS file location.
The issue happens both on my dev machine and in the live server.
Glyphicons are webfonts loaded from addresses hardcoded in the CDN version of Twitter Bootstrap. The original code is:
#font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
You have to either edit the CSS or place the font files on the /fonts/ folder. You can obtain both the fonts and the CSS files at the "customize" page.
I have some css and image files I would like to share between two applications. I created a plugin to do so, and the images resolve properly to their paths in the css files if I use grails run-app. If I create a war, though, the image paths will only resolve to http://www.mysite.com/static/plugins/myplugin-0.1/images/myimage.png instead of to http://www.mysite.com/static/images/myimage.png. This error did not occur with grails 2.2, but it is occurring with grails 2.3.1.
The plugin is installed with the following line in BuildConfig.groovy: grails.plugin.location.'myplugin' = "../myplugin"
Is there a setting I need to update to get wars working properly again?
I changed the urls in my css file to use relative paths ("../images/myimage.png" instead of "/images/myimage.png"), and it fixed the issue.