Error - fa icons (Fontawesome.css)

Question

Error - fa icons (Fontawesome.css)

Asked 7 years, 3 months ago

Viewed 1,448 times

1

Some class icons like, fa fa-user appear within the system, but other icons like fa fa-user-circle-o hyphen do not appear. Follow below the image, as you can see is no icon Access Edition:

CSS code:

body{
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("../img/fundo.jpg");
}
h4{
    font-family: century gothic;
    color: white;
    font-size: 90%;
    font-weight: lighter;
}
h1{
    font-family: Lucida Calligraphy, arial;
    float:center;
    text-align: center;
    color: rgba(0,255,0,0.9);
    font-size: 300%;
    margin-top: 0;
    padding-bottom: 1%; 
    background-color: rgba(0,0,0,0.7);
    font-weight: bolder;
    text-shadow: 2px 2px #000;
}
i.glyphicon, i.fa{
    font-size: 500%;
    color: white;
    text-align: center;
}
.caixa{
    display: inline-block; /* o inline-block deixa na mesma linha horizontal */
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 15%;
    margin: 2%;
    padding: 1%;
    border-radius: 5%;
    border: none;
}
#relatorio:hover, #ocorrencia:hover, #edita_ocorrencia:hover, #usuarios:hover, #sair:hover, #usuario_edit:hover {
    transform: scale(1.1);
    background-color: rgba(0,200,0,0.8);
}

HTML code required:

<h1>Coga</h1>
        <div class="caixa" id="ocorrencia" title="Adicionar Ocorrência." onclick="window.location = 'index.php';">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <br>
        <h4>Adicionar Ocorrência</h4>
        </div>
        <div class="caixa" id="edita_ocorrencia" title="Editar Ocorrência." onclick="window.location = 'editar_ocorrencia.php';">
        <i class="fa fa-pencil-square-o fa-5x"></i>
        <br>
        <h4>Editar Ocorrência</h4>
        </div>
        <div class="caixa" id="usuario_edit" title="Alteração de Login ou Senha!" onclick="window.location = 'editar_ocorrencia.php';">
        <i class="fa fa-address-card fa-5x"></i> <!-- **Não dar certo aqui!** -->
        <br>
        <h4>Edição de Acesso</h4>
        </div>
        <div class="caixa" id="relatorio" title="Gerar Relatório." onclick="window.location = 'relatorio.php';">
        <i class="fa fa-bar-chart-o fa-5x"></i>
        <br>
        <h4>Gerar Relatório</h4>
        </div>
        <div class="caixa" id="usuarios" title="Gerenciamento de Usuários" onclick="window.location = 'gerencia_usuarios.php';">
        <i class="fa fa-user fa-5x"></i>
        <br>
        <h4>Gerenciamento de Usuários</h4>
        </div>
        <div class="caixa" id="sair" title="Sair." onclick="window.location = 'sair.php';">
        <i class="glyphicon glyphicon-log-out"></i>
        <br>
        <h4>Sair</h4>
        </div>

Imported files:

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/estilo_menu.css"><!-- Página CSS -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <script type="text/javascript" src="./jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery/bootstrap.min.js"></script>

None error is informed by the browser.

At first the code can show the icons, but it does not show the one for which it has a hyphen.

Take a look at the FA version, and if the icon you are trying to use exists on it.

– Vitor Adriano

2017/09/14 at 01:42
There is... http://fontawesome.io/

– Carlos Henrique

2017/09/14 at 01:50

3 answers

0

Guy think your problem is being in your files. I put the Font Awesome link via Cdn and it worked normal. Check the folder paths and if your files are ok.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="./jquery/jquery.min.js"></script>
        <script type="text/javascript" src="./jquery/bootstrap.min.js"></script>

        <style>
            body{
                margin: 0;
                padding: 0;
                border: 0;
                background-image: url("../img/fundo.jpg");
            }
            h4{
                font-family: century gothic;
                color: white;
                font-size: 90%;
                font-weight: lighter;
            }
            h1{
                font-family: Lucida Calligraphy, arial;
                float:center;
                text-align: center;
                color: rgba(0,255,0,0.9);
                font-size: 300%;
                margin-top: 0;
                padding-bottom: 1%; 
                background-color: rgba(0,0,0,0.7);
                font-weight: bolder;
                text-shadow: 2px 2px #000;
            }
            i.glyphicon, i.fa{
                font-size: 500%;
                color: white;
                text-align: center;
            }
            .caixa{
                display: inline-block; /* o inline-block deixa na mesma linha horizontal */
                position: relative;
                text-align: center;
                cursor: pointer;
                width: 15%;
                margin: 2%;
                padding: 1%;
                border-radius: 5%;
                border: none;
                background-color: rgba(0,0,0,0.7);
            }
            #relatorio:hover, #ocorrencia:hover, #edita_ocorrencia:hover, #usuarios:hover, #sair:hover, #usuario_edit:hover {
                transform: scale(1.1);
                background-color: rgba(0,200,0,0.8);
            }        
        </style>
    </head>
    <body>
        <h1>Coga</h1>
        <div class="caixa" id="ocorrencia" title="Adicionar Ocorrência." onclick="window.location = 'index.php';">
            <i class="glyphicon glyphicon-plus-sign"></i>
            <br>
            <h4>Adicionar Ocorrência</h4>
        </div>
        <div class="caixa" id="edita_ocorrencia" title="Editar Ocorrência." onclick="window.location = 'editar_ocorrencia.php';">
            <i class="fa fa-pencil-square-o fa-5x"></i>
            <br>
            <h4>Editar Ocorrência</h4>
        </div>
        <div class="caixa" id="usuario_edit" title="Alteração de Login ou Senha!" onclick="window.location = 'editar_ocorrencia.php';">
            <i class="fa fa-address-card fa-5x"></i> <!-- **Não dar certo aqui!** -->
            <br>
            <h4>Edição de Acesso</h4>
        </div>
        <div class="caixa" id="relatorio" title="Gerar Relatório." onclick="window.location = 'relatorio.php';">
            <i class="fa fa-bar-chart-o fa-5x"></i>
            <br>
            <h4>Gerar Relatório</h4>
        </div>
        <div class="caixa" id="usuarios" title="Gerenciamento de Usuários" onclick="window.location = 'gerencia_usuarios.php';">
            <i class="fa fa-user fa-5x"></i>
            <br>
            <h4>Gerenciamento de Usuários</h4>
        </div>
        <div class="caixa" id="sair" title="Sair." onclick="window.location = 'sair.php';">
            <i class="glyphicon glyphicon-log-out"></i>
            <br>
            <h4>Sair</h4>
        </div>
    </body>
</html>

Browser other questions tagged html css font-awesome

You are not signed in. Login or sign up in order to post.

by Giovanni Mesquita • 51 points · Answer 1 · 2017-09-14T02:39:15+00:00

I did a test with your code and apparently it’s all right, as you can see by running the snippet below.

I suggest you update the Bootstrap and Fontawesome CSS files to the latest versions.

body, section {
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("../img/fundo.jpg");
    background-color: #346863;
}
h4{
    font-family: century gothic;
    color: white;
    font-size: 90%;
    font-weight: lighter;
}
h1{
    font-family: Lucida Calligraphy, arial;
    float:center;
    text-align: center;
    color: rgba(0,255,0,0.9);
    font-size: 300%;
    margin-top: 0;
    padding-bottom: 1%; 
    background-color: rgba(0,0,0,0.7);
    font-weight: bolder;
    text-shadow: 2px 2px #000;
}
i.glyphicon, i.fa{
    font-size: 500%;
    color: white;
    text-align: center;
}
.caixa{
    display: inline-block; /* o inline-block deixa na mesma linha horizontal */
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 15%;
    margin: 2%;
    padding: 1%;
    border-radius: 5%;
    border: none;
}
#relatorio:hover, #ocorrencia:hover, #edita_ocorrencia:hover, #usuarios:hover, #sair:hover, #usuario_edit:hover {
    transform: scale(1.1);
    background-color: rgba(0,200,0,0.8);
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<section>
<h1>Coga</h1>
    <div class="caixa" id="ocorrencia" title="Adicionar Ocorrência." onclick="window.location = 'index.php';">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <br>
        <h4>Adicionar Ocorrência</h4>
    </div>
    <div class="caixa" id="edita_ocorrencia" title="Editar Ocorrência." onclick="window.location = 'editar_ocorrencia.php';">
        <i class="fa fa-pencil-square-o fa-5x"></i>
        <br>
        <h4>Editar Ocorrência</h4>
    </div>
    <div class="caixa" id="usuario_edit" title="Alteração de Login ou Senha!" onclick="window.location = 'editar_ocorrencia.php';">
        <i class="fa fa-address-card fa-5x"></i> <!-- **Não dar certo aqui!** -->
        <br>
        <h4>Edição de Acesso</h4>
    </div>
    <div class="caixa" id="relatorio" title="Gerar Relatório." onclick="window.location = 'relatorio.php';">
        <i class="fa fa-bar-chart-o fa-5x"></i>
        <br>
        <h4>Gerar Relatório</h4>
    </div>
    <div class="caixa" id="usuarios" title="Gerenciamento de Usuários" onclick="window.location = 'gerencia_usuarios.php';">
        <i class="fa fa-user fa-5x"></i>
        <br>
        <h4>Gerenciamento de Usuários</h4>
    </div>
    <div class="caixa" id="sair" title="Sair." onclick="window.location = 'sair.php';">
        <i class="glyphicon glyphicon-log-out"></i>
        <br>
        <h4>Sair</h4>
    </div>
</section>

by Tulio Vieira • **497** points · Answer 2 · 2017-09-17T03:53:36+00:00

add these two tags to your code that will solve your problem the call of these two tags in your code automatically imports the font-awesome for your code so Sanando your problem

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

they request the sources and capture them into your site or system.