Skip to main content
tags editadas
Link
user28595
user28595
Fonte Link

Erro - Ícones fa (FontAwesome.css)

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.