Problems with Font Awesome

Question

Problems with Font Awesome

Asked 7 years, 2 months ago

Viewed 1,663 times

2

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

I use the Font Awesome 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.

When I include the other 2 classes boot.css and style.css it stops showing the icons according to the image below:

Could you help me?

Besides the problem with Font Awesome, I also want to hide the text in 480px resolutions. showing only the icon.

Follow the 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;}

/*

Code of 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;}

I forgot about 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>

Friend, also put the code to insert the icons. Probably the tag is conflicted.

– Alexandre Cavaloti

2017/09/14 at 14:41

2 answers

Browser other questions tagged css html5 font font-awesome

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

by user81560 · Answer 1 · 2017-09-14T15:57:46+00:00

Really the mistake is a "nonsense", light thing that we end up not realizing, I believe you are a little beginner, but come on.

Whenever you have these problems open Developer tools from your browser and look for the ccs next door and see what might be happening, check which file. css you put and disappeared these icones from Font Awesome, in your case the problem is in boot.css.

Goes below:

It’s on line 4 of boot.css, on the 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 the font-family and ran the awesome font again.

If you would like to use this font-family on your website, I recommend putting it on the body of your style.css

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

by Maurício Samy Silva • 36 points · Answer 2 · 2017-09-14T14:57:50+00:00

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

Do the following:
1-) Link to the Fontawesome style sheet AFTER the link to the other style sheets.
2-) If you have already done so, or if you have done so and have not solved, place the HTML markup of the HEAD section of the page in Jsfiddle or another code sharing tool of your choice and post the link.