css - Css相对网址图像未出现

Question

我的图标在网页上“未显示”时遇到问题，这些图标分别存储在字体文件夹中。

下面包含我的 styles.css 的片段

样式.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;
}

我的文件结构

如何引用我的文件以确保我的图标正确显示？根据此处的示例，http: //css-tricks.com/quick-reminder-about-file-paths/ 我使用“../../”，因为这将转到资源/字体。我错了吗？

请问有什么帮助吗？谢谢！

Answer 1

你的 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;
}

Answer 2

每个 ../ 用于上一级目录。您当前位于 css/ 目录中。如果要获取资源/字体，只需要一个../即可获取资源，然后输入fonts/