无法从本地放置的FA库中渲染字体真棒图标

我已经下载了字体真棒库并将其链接到我的HTML。这里是我的代码的最简单的版本：无法从本地放置的FA库中渲染字体真棒图标

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="font-awesome.min.css"> 
    </head> 
    <body> 
     <div id="content"> 
      <i id="search-icon" class="fa fa-search"></i> 
     </div> 
    </body> 
</html>

但是，什么是在浏览器中呈现为：

enter image description here

我缺少什么？我只需要在Firefox中使用它。

来源

2014-09-24 Rahul Desai

我会尝试先设置页面的编码，然后检查是否所有其他文件都放在正确的目录中，因为"Copy the entire font-awesome directory into your project"在get started页面中说过。

来源

2014-09-24 04:06:36 Niloct

我将编码设置为''但它没有帮助。 FA CSS文件与HTML文件位于同一文件夹中。 – 2014-09-24 04:14:54

你需要更多的文件，而不仅仅是CSS。查看我答案中的入门链接。 – Niloct 2014-09-24 04:16:02

首先，当您检查页面并单击font-awesome.min.css文件时，它是否正确链接。

其次是FontAwesome与正确的文件夹（相对于您的font-awesome.min.css文件）坐在一起的字体和支持文件？

例如，除非您在他们提供的文件中更改CSS，否则需要将FontAwesome附带的/ font目录放在CSS文件的目录中。

请参阅以下内容作为CSS如何引用字体文件的示例。

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

步骤：更改您的href指向：

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

下载资产FontAwesome：http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
同时移动/ css和/字体文件夹，直接旁边的HTML文件。

来源

2014-09-24 04:10:08 Alex

是的，文件'font-awesome.min.css'与HTML文件放在同一个文件夹中。我刚从http://fortawesome.github.io/Font-Awesome/下载这个文件。我错过了什么？我需要哪些支持文件？ – 2014-09-24 04:17:01

除了font-awesome.min.css文件外，还有其他需要FontAwesome工作的文件。您还需要将/ font文件夹移动到您的项目中。我建议删除您移入的css文件，然后按照上述更新后的答案中的说明操作。 – Alex 2014-09-24 04:18:57

无法从本地放置的FA库中渲染字体真棒图标

回答

相关问题