Css relative url images not appearing

Question

I have a problem with my icons "not showing up" on a web page, These icons are stored in the fonts folder respectively.

Below contains the snippet of my styles.css

styles.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

My file structure

enter image description here How do I reference my files to ensure that my icons show up properly? According to the example here, http://css-tricks.com/quick-reminder-about-file-paths/ I use "../../" as this will go to resources/fonts. Am I wrong?

Any help please? Thanks!

have you tried just starting with / to indicate starting from the root and pathing from there? — kinakuta, Aug 21 '14 at 05:20

score 0 · Answer 1 · answered Aug 21 '14 at 05:17

0

each ../ is used to go up one directory. You are currently in the css/ directory. If you want to get to resources/fonts, you only need one ../ to get to resources, then you can enter fonts/

answered Aug 21 '14 at 05:17

NewIsAlwaysBetter

106
1
5

the fonts directory is at the same level as the resources directory, not a child of it – kinakuta Aug 21 '14 at 05:19
"I use "../../" as this will go to resources/fonts. ", so I was assuming he wanted to get into the fonts directory that IS a child of resources.(He has two fonts/ directories). – NewIsAlwaysBetter Aug 21 '14 at 05:20

score 0 · Answer 2 · answered Aug 21 '14 at 05:21

Your CSS should be:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Hi there, I changed my css to the one you have listed above. However, the icons are still not showing. Any idea why? — Lawrence Wong, Aug 21 '14 at 05:23

Css relative url images not appearing

2 Answers2