1

Alguns ícones da classe como por exemplo, fa fa-user aparecem dentro do sistema, mas outros ícones como fa fa-user-circle-o que possuem o hífen não aparecem. Segue abaixo a imagem, como podem perceber está sem ícone Edição de Acesso:

inserir a descrição da imagem aqui

Código CSS:

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

Código HTML necessário:

<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>

Arquivos importados:

<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>

Nenhum erro é informado pelo navegador.

A princípio o código consegue mostrar os ícones, mas não mostra aquele que pelo qual possui hífen.

2
  • Da uma olhada na versão do FA, e se o ícone que você está tentando usar existe nela. Commented 14/09/2017 às 1:42
  • Existe sim... fontawesome.io Commented 14/09/2017 às 1:50

3 Respostas 3

0

Cara acho que seu problema está sendo nos seus arquivos. Coloquei o link do Font Awesome via cdn e funcionou normal. Verifique os caminhos de pastas e se seus arquivos estão 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>

0

Fiz um teste com seu código e aparentemente está tudo certo, como pode ver executando o snippet abaixo.

Sugiro que atualize os arquivos CSS do Bootstrap e do FontAwesome para as respectivas últimas versões.

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>

-1

adicione essas duas tags no seu código que irá resolver seu problema a chamada dessas duas tags no seu codigo importa automaticamente o font-awesome para seu codigo assim sanando o seu problema

    <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">

elas fazem a requisição das fontes e as capturam para dentro do seu site ou sistema.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .