PDF FontAwesome icon not showing

问题

Using the CSS ::before tag, I am trying to use the FontAwesome PDF icon to show up an HTML page.

FontAwesome's cheat sheet says to use use this Unicode

 fa-file-pdf-o [&#xf1c1;]

So, I removed the "&#x" and replaced it with the backslash "\", but it didn't work.

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

Only an icon placeholder displays, but not the PDF icon.

The directions on that page, says to "use on the desktop, install FontAwesome.otf, set it as the font in your application..."

Here's a link to their icon cheatsheet page: https://fortawesome.github.io/Font-Awesome/cheatsheet/

So, I tried linking the FontAwesome.otf file to my web page, like this:

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

I am pointing to this directory. Files are correct.

I have this rule in my CSS

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

...and I get this weird icon next the the PDF icon

Solution:
sebastianbrosc showed me this answer. He hadded a font-family class to is jsFiddle example in order to call the fontAwesome font's unicode. The unicode is considered a custom font. So I added font-family: FontAwesome to the rule, and it worked!

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

回答1:

You should add the folder from the following to your project: https://github.com/FortAwesome/Font-Awesome/tree/master/fonts

On CSS you have to add the following code and change the paths to the font files:

@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;
}

A very simple solution is to add the stylesheet (with the css above) from CDN to your website:

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

Here you can find an example with your cheatsheet and a unicode solution for CSS (both using the foundation css from cdn): http://jsfiddle.net/sebastianbrosch/9qjd8ows/

来源：https://stackoverflow.com/questions/33342042/pdf-fontawesome-icon-not-showing

标签

css3