PDF FontAwesome图标未显示

Question

使用CSS :: before标签，我试图使用FontAwesome PDF图标显示HTML页面。

FontAwesome的备忘单说要使用这个Unicode

 fa-file-pdf-o []

所以，我删除了“＆amp; #x”并用反斜杠“\”替换它，但它没有用。

.pdf-icon li ::before {
    content: "\f1c1";
}

仅显示图标占位符，但不显示PDF图标。

该页面上的说明是“在桌面上使用，安装FontAwesome.otf，将其设置为应用程序中的字体......”

以下是其图标备忘单页面的链接：https://fortawesome.github.io/Font-Awesome/cheatsheet/

所以，我尝试将FontAwesome.otf文件链接到我的网页，如下所示：

link rel="stylesheet" href="font-awesome/fonts/FontAwesome.otf"

我指向这个目录。文件是正确的。

我的CSS中有这个规则

.pdf-icon li ::before {
    content: "\f1c1";
}

...然后我在PDF图标旁边看到了这个奇怪的图标

解决方案：
塞巴斯蒂安布罗斯向我展示了这个答案。为了调用fontAwesome字体的unicode，他给一个字体系列类jsFiddle example。 unicode被认为是自定义字体。所以我在规则中添加了font-family：FontAwesome，它有效！

.pdf-icon li ::before {
    font-family:FontAwesome;
    content: "\f1c1";
}

Answer 1

您应该将以下文件夹添加到您的项目中：https://github.com/FortAwesome/Font-Awesome/tree/master/fonts

在CSS上，您必须添加以下代码并更改字体文件的路径：

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

一个非常简单的解决方案是将CDN中的样式表（上面的css）添加到您的网站：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

在这里你可以找到一个包含你的cheatsheet和CSS unicode解决方案的例子（都使用cdn的基础css）：http://jsfiddle.net/sebastianbrosch/9qjd8ows/