2

Olá estou com problema com o Font Awesome, estou criando uma página que quero utilizar os ícones, comecei vinculando a url do Font Awesome, ele mostra os ícones, depois inclui mais 2 arquivos CSS, boot.css e style.css, após incluir os ícones pararam de serem mostrados.

Utilizo o link do Font Awesome:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

Ex: mostrando os ícones.

ícones funcionando

Quando eu incluo as outras 2 classes boot.css e style.css ele para de mostrar os ícones conforme a imagem abaixo:

ícones com erro!

Poderiam me ajudar?

Além do problema com o Font Awesome, também quero ocultar o texto em resoluções de 480px. mostrando apenas o ícone.

Segue o boot.css

/*  boot.css   */

/*RESET*/
*, *:before, *:after{
    margin: 0;
    padding: 0;
    outline: 0;

    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0em;
    /*vertical-align: middle;*/

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body{background: #fff;}
h1{font-size: 2em; font-weight: 300;}
h2{font-size: 1.8em; font-weight: 400;}
h1{font-size: 1.5em; font-weight: 500;}
p{margin-bottom: 15px;}
b,strong{font-weight: bold;}
p:last-child{margin-bottom: 0;}
mark{padding: 5px 10px; background-color: #eee;}
ul{list-style: none;}
img{/*float: left;*/ border: none; /*width: 100%;*/ max-width: 100%; vertical-align: middle;}
small{font-size: 0.75em; color: #555;}
a{text-decoration: none;}
a img{border: 0;}

/*BOOT
CONTAINER*/
.container{float: left; width: 100%;}
.content{width: 90%; margin: 0 5%;/* padding: 40px 0;*/}
.content-page{padding: 60px 0;}

/*

Código do style.css

/*  style.css   */
/*LOGO*/
.main_logo{position: relative; width: 185px; height: 185px; }
.main_logo a{position: absolute; width: 185px; height: 185px; background: url(../images/brasao_tjac.png) center center no-repeat;background-size: auto 76%;}
.container .social{float: left; background: #1F8FA4; width: 50%; height: 25px; text-align: left; padding-left: 10px;}
.container .acesso{float: right; background: #076273; width: 50%; height: 25px; text-align: right; padding-right: 10px;}
.acesso fa fa-envelope{display: inline-block; color: #fff;}
.bar {display: inline-block; color: #fff;}
.container fa {display: inline-block; color: #fff;}
.container .acesso a ul li {display: inline-block;}


.container{float: left; width: 100%;}
.content{width: 90%; margin: 0 5%;/* padding: 40px 0;*/}
.content-page{padding: 60px 0;}

Tinha Esquecido do HTML ;-)

index.html

<!DOCTYPE html>
<html lang="pt-br" itemscope itemtype="https://schema.org/Article">
    <head>
        <meta charset="UTF-8">
        <title>Novo Site</title>
        <meta name="description" content="DESCRIÇÃO"/>
        <meta name="robots" content="index, follow"/> 
        
        <link rel="author" href="https://plus.google.com/GOOGLE/posts"/>
        <link rel="publisher" href="https://plus.google.com/GOOGLE/PUBLISHER"/>
        <link rel="canonical" href="">
               
        <meta itemprop="name" content=""/>
        <meta itemprop="description" content=""/>
        <meta itemprop="image" content=""/>
        <meta itemprop="url" content=""/>
        
        <meta property="og:type" content="article" />
        <meta property="og:title" content="" />
        <meta property="og:description" content="" />
        <meta property="og:image" content="" />
        <meta property="og:url" content="" />
        <meta property="og:site_name" content="" />
        <meta property="og:locale" content="pt_BR" />
        <meta property="og:app_id" content="" />
        <meta property="article:author" content="https://www.facebook.com/" />
        <meta property="article:publisher" content="https://www.facebook.com/" />

        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:site" content="TWITTER" />
        <meta property="twitter:domain" content="TWITTER" />
        <meta property="twitter:title" content="TWITTER" />
        <meta property="twitter:description" content="TWITTER" />
        <meta property="twitter:image:src" content="TWITTER" />
        <meta property="twitter:url" content="TWITTER" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->   
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="css/boot.css"/>
        <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700' rel='stylesheet' type='text/css'>
        <!-- font-awesome.css
        href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css rel='stylesheet' type='text/css'>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  
        
        <link rel="stylesheet" href="css/font-awesome.css"/>-->

        
        <link rel="shortcut icon" href="images/favicon.png"/>
    </head>
        <body>

        <header class="bar">
            <div class="container">
                <div class="social">
                    <a href="https://www.facebook.com/minhapage" target="_blank" title="facebook.com/"><li class="fa fa-facebook-square"></li></a>
                    <a href="https://twitter.com/meutwiter" target="_blank" title="twitter.com/twitter"><li class="fa fa-twitter"></li></a>
                    <a href="https://www.youtube.com/user/meuyb" target="_blank" title="youtube.com/user/"><li class="fa fa-youtube-play"></li></a>                    
                    <a href="https://www.flickr.com/photos/meusite/" target="_blank" title="Flickr - "><i class="fa fa-flickr"></i></a>
                    <a href="https://www.meusite.com.br/rss/" target="_blank" title="Feed - RSS"><li class="fa fa-rss"></li></a>
                </div>
                <div class="acesso">
                    <a href="https://www.meusite.com.br/mail" title="Correio Eletrônico" target="_blank"><i class="fa fa-envelope">Correio Eletrônico</i></a><span>|</span>
                    <a href="https://www.meusite.com.br/ouvidoria/" title="Ouvidoria" target="_blank"><i class="fa fa-comments-o"> Ouvidoria</i></a> <span>|</span>
                    <a href="http://intranet..jus.br/" title="Intranet" target="_blank"><i class="fa fa-sign-in">Intranet</i></a><span>|</span>                   
                    <a href="https://www.meusite.com.br/acesso-a-informacao/" title="Acesso à Informação"><i class="fa fa-info">Acesso à Informação</i></a><span>|</span>
                    <a href="http://www.vlibras.gov.br/" title="Acessível Via Libras" target="_blank"><i class="fa fa-sign-language v_libras">Libras</i></a><span>|</span>
                </div>
            </div>
        </header>
        <header class="container">
            <div class="content">
                <a title="Home" href="Início" class="radius">
                    <img src="images/logo.png" alt="Início " title="Início " width="135" height="135" class="fl-left"><br/>  
                </a>
                <h1 class="main_logo">
                    
                    <div class="fl-right">RODAPÉ DO SITE</div>                    
                    <div  class="fl-right">DESCRIÇÃO</div>
                    <div class="clear"></div>
                    
                </h1>
                <div class="search"></div>

                <ul class="main_nav fl-right">
                    NAVEGAÇÃO
                  
                </ul>
                <div class="clear"></div>
            </div>
        </header>
        </body>
</html>

1
  • Amigo, coloca também o código para inserir os ícones. Provavelmente a tag está sofrendo conflito. Commented 14/09/2017 às 14:41

2 Respostas 2

2

Realmente o erro é uma "bobagem", coisa leve que a gente acaba não percebendo, acredito que você seja um pouco iniciante, mas vamos lá.

Sempre que ter esses problemas abra o developer tools do seu navegador e procure a ccs ao lado e veja o que pode está acontecendo, verifique qual arquivo .css você colocou e sumiu esses icones do Font Awesome, no seu caso o problema está no boot.css.

Segue abaixo:

Está na linha 4 do boot.css, na font-family:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    outline: 0;
    /* font-family: 'Open Sans', sans-serif; */
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0em;
    vertical-align: middle;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Removi a font-family e voltou a funcionar o font awesome.

Caso queria utilizar essa fonte-family em seu site, aconselho colocar na body do seu style.css

Você colocou * pra tudo no site ser da font-family 'Open Sans', sans-serif; então o font awesome acaba sumindo mesmo.

2
  • Grato pelo auxilio!!!! Commented 14/09/2017 às 16:47
  • Caso tenha resolvido seu problema, marque como solução, grato.
    – user81560
    Commented 14/09/2017 às 17:59
0

Aparentemente o que está causando o problema é a resolução de conflito entre declarações CSS nas diferentes folhas de estilos. Sem examinar a seção HEAD da página fica difícil apontar uma solução.

Faça o seguinte:
1-) Coloque o link para a folha de estilos de FontAwesome DEPOIS do link para as outras folhas de estilos.
2-) Se você já fez isso, ou se fez e não resolveu, coloque a marcação HTML da seção HEAD da página no JSFiddle ou outra ferramenta de compartilhamento de código de sua preferência e poste o link.

1

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 .