Error - Font-Awesome icon

Question

Need to Add an icon in a menu, the icon I want to use is the:

fa fa-file-pdf-o (PDF)

Classy:

font-awesome.min.css

Only there is a problem when I add it. It appears as follows:

The HTML code that creates this menu item is below:

<div class="caixa" title="Gerar PDF" id="pdf" data-toggle="modal" data-target="#pdf">
        <i class="fa fa-file-pdf-o"></i>
        <br>
        <h4>PDF</h4>
</div>

And the CSS code of these tags is following:

.caixa{ 
        background-color: white;
        display: inline-table;  /*o inline-block deixa na mesma linha horizontal*/ 
        position: relative;
        text-align: center;
        cursor: pointer;
        width: 5%;
        padding: 0;
        border-radius: 5%;
        border: none;
        margin-top: 1%;
        margin-right: 1%;
        float: right;
}
.fa:before{
        font-family: FontAwesome !important;
}
.caixa h4{
        font-family: century gothic;
        color: rgba(0,0,0,0.8);
        font-size: 90%;
        margin: 0;
        padding: 0;
        border: 0;
}

The error reported by browser is this:

Failed to load Resource: the server responded with a status of 404 (Not Found) fontawesome-Webfont.ttf

Failed to load Resource: the server responded with a status of 404 (Not Found) fontawesome-Webfont.Woff

My php page requesting the css file:

The file that is requested is inside the css folder:

And the way it’s imported into the code...

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

Answer 1

I was taking a look here and was able to find that the problem I was having, according to the error that the browser reported is that it requested two files that were inside the folder fonts, which actually didn’t even exist, but it specified this on the way, so I remembered that when I downloaded there was this folder with the two files that were being requested by the browser, so I downloaded the file again and added the folder with the two files and it worked!

Then in the case when imported the font-awesome.min.css file should also be placed the fonts folder, if in the case of using the class icons.

Answer 2

Try changing the import form to:

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