Awesome Font Problems

2

Hello, I'm having trouble with Awesome Font , I'm creating a page that I want to use the icons, I started typing the Awesome Font url, it shows the icons, then it includes 2 more CSS files, boot .css and style.css, after including the icons have stopped showing.

I use the Awesome Font link:

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

Ex: showing the icons.

WhenIincludetheother2boot.cssandstyle.cssclassesitstopsshowingtheiconsasshownbelow:

Couldyouhelpme?

InadditiontotheproblemwithFontAwesome,Ialsowanttohidethetextat480pxresolutions.showingonlytheicon.

Followboot.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;}

/*

style.css code

/*  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;}

I had forgotten 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>
    
asked by anonymous 14.09.2017 / 16:28

2 answers

1

Actually the error is a "nonsense", something that we do not notice, I think you are a bit new beginner, but come on.

Whenever you have these problems open the developer tools of your browser and look for the ccs next and see what can be happening, check which .css file you have placed and deleted these icons from Awesome Font, in your case the problem is in boot.css.

Follow below:

You are on line 4 of boot.css, in 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;
}

I removed font-family and the awesome font worked again.

If you wanted to use this font-family on your site, I advise you to put it in the body of your style.css

You put * to everything on the site to be of font-family 'Open Sans', sans-serif; so the awesome font ends up disappearing anyway.

    
14.09.2017 / 17:57
0

Apparently what is causing the problem is conflict resolution between CSS declarations in different style sheets. Without examining the HEAD section of the page it is difficult to point out a solution.

Do the following:
1-) Place the link to the FontAwesome stylesheet AFTER the link to the other style sheets. 2-) If you have already done this, or if you did and did not solve it, place the HTML markup of the HEAD section of the page in the JSFiddle or other code sharing tool of your choice and post the link.

    
14.09.2017 / 16:57