Wyskakuje mi wiele ikonek zamiast jednej. Co zrobić, żeby tak nie było?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Retrogranie</title>
<meta name="description" content="Serwis o starych grach pochodzących z Nintendo Entertainment System"/>
<meta name="keywords" content="gry, komputerowe, retro, nes, konsole, retrogranie, stare gry"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="pad.png" alt="konsola" style="float: left;"/>
<span style="color: #c34f4f">retro</span>granie.com
<div style="clear: both;"></div>
</div>
<div class="nav"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada sed eros sed eleifend. Ut luctus iaculis vestibulum. Curabitur consequat euismod mi, a consequat mi venenatis vel. Vivamus molestie augue sed nibh cursus, at hendrerit eros vulputate. Nulla dictum, leo ac vulputate iaculis, quam tortor convallis ligula, eget consequat magna massa vitae ante. Sed gravida leo in nunc finibus posuere. Nulla mi risus, aliquam ac diam tempus, laoreet varius metus. Sed vestibulum, orci sit amet eleifend fermentum, lacus urna pharetra diam, a fermentum eros mauris vel mi. Morbi euismod lectus eget metus venenatis, a feugiat arcu finibus. In porttitor fringilla erat, a ornare magna accumsan in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Nunc sit amet velit ultricies, faucibus nisi quis, egestas massa. Integer ornare lorem et dolor vehicula malesuada.</p>
<p>Donec eu tincidunt libero. Sed non augue imperdiet, posuere velit vel, scelerisque sapien. Suspendisse vel faucibus lectus. Morbi cursus lobortis nulla, eu consequat nulla fermentum non. Phasellus molestie enim nulla, eu pharetra nibh ornare non. Nullam ut efficitur nibh. Sed accumsan justo ut lacus aliquam, et malesuada mi tincidunt. Nunc pellentesque eget nunc in ultricies. Praesent placerat orci lectus, sed porta sem ultricies ut. In sapien sapien, cursus ac fermentum porttitor, vulputate a ipsum. Nulla eget consequat neque, et faucibus arcu. Nullam et mauris tristique, semper enim sit amet, tincidunt magna. Phasellus in imperdiet diam.</p>
<p>Aliquam suscipit congue enim eget vulputate. Duis nec euismod ligula, in maximus arcu. Mauris sit amet lorem mauris. Sed facilisis semper turpis ut rutrum. Pellentesque sit amet ante at neque porta laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi elementum ultricies nulla, nec tristique dui iaculis nec. Donec at dictum tellus, ut laoreet lectus. Duis porttitor libero id elit bibendum, sit amet efficitur augue dapibus. Donec interdum consectetur fringilla. Vivamus mollis eget turpis eu tristique. Vivamus bibendum tempus justo at dignissim. Sed scelerisque, ex sed imperdiet pharetra, felis lorem iaculis magna, et fermentum leo nisl nec arcu.</p>
<p>Fusce vitae urna quis nisi maximus tempus. Proin eu tellus dictum, pretium eros quis, vehicula lorem. Nulla augue neque, dignissim vitae consectetur porta, aliquet a nisl. Nunc malesuada, turpis ac sodales feugiat, ligula mi dapibus sapien, id lacinia tortor dolor ac dui. Donec sed purus malesuada, interdum velit aliquam, lacinia tellus. Aenean sed ullamcorper diam. Phasellus rutrum consectetur felis ac finibus.</p>
<p>Praesent id laoreet augue, eget scelerisque felis. Etiam quis ante justo. Suspendisse sed ex porta, euismod erat et, varius tellus. Fusce non ante mauris. Etiam ac dolor vel augue scelerisque consectetur at cursus lectus. Nullam tortor tortor, imperdiet nec ultricies in, finibus ac quam. Praesent eu sollicitudin elit. Mauris sodales arcu eu velit faucibus, sit amet dictum elit fermentum. Aenean ac vestibulum arcu. Mauris cursus tempus ligula eget pellentesque. Suspendisse sem lacus, accumsan sit amet metus in, viverra venenatis tortor. Morbi nec convallis nisl, non varius est.</p>
</div>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<i class="icon-facebook-1"></i>
</div>
<div class="yt">
<i class="icon-youtube">
</div>
<div class="tw">
<i class="icon-twitter">
</div>
<div class="gplus">
<i class="icon-gplus">
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</body>
</html>
body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
margin: 0 !important;
}
.wrapper
{
width: 100%;
}
.header
{
width: 100%;
padding: 40px 0;
}
.logo
{
width: 450px;
font-size: 48px;
margin-left: auto;
margin-right: auto;
}
.nav
{
width: 100%;
padding: 10px 0;
background-color: #c34f4f;
text-align: center;
border-top: 1px solid #751b1b;
border-bottom: 1px solid #751b1b;
height: 40px;
}
.content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
.socials
{
width:100%;
text-align: center;
background-color: #292929;
}
.socialdivs
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.fb
{
width: 250px;
height: 155px;
float: left;
}
.fb:hover
{
background-color: #4668b3;
}
.yt
{
width: 250px;
height: 155px;
float: left;
}
.yt:hover
{
background-color: #d94348;
}
.tw
{
width: 250px;
height: 155px;
float: left;
}
.tw:hover
{
background-color: #3095d3;
}
.gplus
{
width: 250px;
height: 155px;
float: left;
}
.gplus:hover
{
background-color: #d95333;
}
body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
margin: 0 !important;
}
.wrapper
{
width: 100%;
}
.header
{
width: 100%;
padding: 40px 0;
}
.logo
{
width: 450px;
font-size: 48px;
margin-left: auto;
margin-right: auto;
}
.nav
{
width: 100%;
padding: 10px 0;
background-color: #c34f4f;
text-align: center;
border-top: 1px solid #751b1b;
border-bottom: 1px solid #751b1b;
height: 40px;
}
.content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
.socials
{
width:100%;
text-align: center;
background-color: #292929;
}
.socialdivs
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.fb
{
width: 250px;
height: 155px;
float: left;
}
.fb:hover
{
background-color: #4668b3;
}
.yt
{
width: 250px;
height: 155px;
float: left;
}
.yt:hover
{
background-color: #d94348;
}
.tw
{
width: 250px;
height: 155px;
float: left;
}
.tw:hover
{
background-color: #3095d3;
}
.gplus
{
width: 250px;
height: 155px;
float: left;
}
.gplus:hover
{
background-color: #d95333;
}
Rezultat:
