Problems with Font Awesome
Hello I'm having trouble with the Font Awesome , I'm creating a page that I want to use the icons, I started by linking the url of the Font Awesome, It shows the icons, then includes 2 more CSS files, boot.css and style.css, after including the icons stopped being shown.
I use 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.
When I include the other 2 boot classes.css and style.css it stops showing the icons as shown below:
Could you help me?
In addition to 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;}
/*Style Code.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;}Had forgotten the 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>2 answers
Really the error 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 your browser's developer tools and look for ccs next to it and see what might be going on, check which file .css you put and disappeared these icons of Font Awesome, in your case the problem is in the boot.css.
Follows below:
Is on line 4 of 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;
}
I removed the font-family and font awesome came back to work.
If you want to use this font-family on your site, I advise you to put in the body of your style.css
You put * for everything on the Website be font-family 'Open Sans', sans-serif; then font awesome ends up disappearing.
Apparently what is causing the problem is conflict resolution between CSS statements in the different stylesheets. Without examining the HEAD section of the page it is difficult to point out a solution.
Do the following:
1 -) put the link to the FontAwesome stylesheet after the link to the other stylesheets.
2 -) if you have already done this, or if you did and did not solve, put the HTML markup of the HEAD section of the page in JSFiddle or another tool share code of your choice and post the link.