How to use #resource in CSS?


Tags: css,eclipse,jsf,jsf-2,glassfish

Problem :

This is how I refer my css file in my index.xhtml:

<h:outputStylesheet library="css" name="vendors/fontello.css" />

And that's how I'm using #resources, which works fine:

background-image: url("#{resource['img:lang/ico-en.gif']}");

This way is how it's working in a HTML project:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello69db.eot?24671060');
  src: url('../font/fontello69db.eot?24671060#iefix') format('embedded-opentype'),
       url('../font/fontello69db.woff?24671060') format('woff'),
       url('../font/fontello69db.ttf?24671060') format('truetype'),
       url('../font/fontello69db.svg?24671060#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?24671060#fontello') format('svg');
  }
}
*/

Then as I'm moving the HTML project into JSF 2 project I would like to use #resources, right ? So I did the same thing as before but doesn't work:

@font-face {
  font-family: 'fontello';
  src: url("#{resource[css:font/fontello69db.eot?24671060']}");
/*  src: url("#{resource[css:font/fontello69db.eot?24671060');*/

  src: url("#{resource[css:font/fontello69db.eot?24671060#iefix']}") format('embedded-opentype'),
       url("#{resource[css:font/fontello69db.woff?24671060']}") format('woff'),
       url("#{resource[css:font/fontello69db.ttf?24671060']}") format('truetype'),
       url("#{resource[css:font/fontello69db.svg?24671060#fontello']}") format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url("#{resource[css:font/fontello.svg?24671060#fontello']}") format('svg');
  }
}
*/

And this is my project structure:

project

Any idea how to use #resource correctly in this case ?



Solution :

remove url parameters from font file names. try that.

@font-face {
    font-family: 'fontello';
    src: url("#{resource[css:font/fontello69db.eot']}?24671060");

    src: url("#{resource[css:font/fontello69db.eot']}?24671060#iefix") format('embedded-opentype'),
    url("#{resource[css:font/fontello69db.woff']}?24671060") format('woff'),
    url("#{resource[css:font/fontello69db.ttf']}?24671060") format('truetype'),
    url("#{resource[css:font/fontello69db.svg']}?24671060#fontello") format('svg');
    font-weight: normal;
    font-style: normal;
}

    CSS Howto..

    how to scale an image disproportionally via css?

    how to css absolute positioning right way

    How to make semi-transparent background [duplicate]

    How do you programmatically apply a css class to an asp.net control?

    css - how to get (responsive) li's with the same height when they have a different width?

    How to add css style in php email?

    CSS - how to fix the hover?

    How to use CSS to square the corner on a submit button

    How to make this layout more responsive in CSS?

    how scrollable text line inside a div without showing scroll bars

    How can I vertically align text within a span element, or make the span the same size as the text?

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to make a sliding dashboard similar to medium.com? [closed]

    Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

    show No-Overlay (transparent background) when using backdrop:“static” in bootstrap modal

    How do I increase the spacing between different parts of blockquotes with CSS?

    how can I hide empty cells in a table with bootstrap 3

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    css: how to format contact entry screen

    CSS How to apply child:hover but not parent:hover

    How to apply css to an iframe

    How does one customize the appearance of jquery.perfect-scrollbar?

    How to put the hover image above the original image

    How can I create a color with values for green, blue, orange, and gold only?

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to get two column float left div layout to word wrap?

    How to achieve this complex layout with CSS?

    How to do page numbering in header/footer htmls with wkhtmltopdf?

    How does one move html elements with scroll?

    How to make a TableLayoutPanel like resizable div in html