Cześć,
mam problem: robiłem wszystko dokładnie tak jak pan Mirek w trzecim kursie "css" i gdy doszło do dodawania ikonek (fb, yt, tw i g+) to mi na tworzonej stronie nic się nie udało i jak nie było ikonek tak nadal nie ma :(
Tutaj kody (nwm czy dobrze wstawiłem)
<!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 href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="css/fontello2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="pad.png" style="float: left;"/>
<span style="color: #c34f4f">retro</span>granie.com
<div style="clear:both;"></div>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget rhoncus mi, in vestibulum lorem. Nulla urna mauris, egestas nec erat vel, tempus ullamcorper dolor. Maecenas eu mattis arcu. Aliquam dapibus quis risus eget consequat. Curabitur eu convallis urna, vitae scelerisque est. Nunc eget posuere urna. Nulla facilisi. Phasellus blandit eleifend aliquet. Curabitur porttitor pharetra pretium. Nam ac eros laoreet, consequat felis at, auctor metus.</p>
<p>Etiam condimentum sed lectus at laoreet. Fusce pellentesque porta purus a venenatis. Quisque erat augue, malesuada nec ultrices vitae, consequat sed metus. Donec at ipsum viverra mauris feugiat euismod. Morbi ultrices tellus libero, et gravida tortor laoreet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi auctor interdum ornare. Praesent vel urna volutpat, accumsan erat at, pharetra urna. Pellentesque egestas sodales nibh vitae sodales. Suspendisse laoreet risus neque, viverra dictum leo condimentum vitae. Sed sem diam, blandit eu vestibulum in, tempor nec lacus. Nullam lacinia commodo elit, sed euismod leo. Suspendisse porttitor sem mi, fringilla viverra diam tincidunt ut.</p>
<p>In dui turpis, varius nec neque id, mollis cursus neque. Pellentesque eget laoreet nulla. Nam lectus ex, vehicula ut euismod et, rhoncus in lectus. Donec luctus, sapien a venenatis vulputate, sapien ante condimentum lectus, ut molestie enim velit vitae magna. Suspendisse varius neque pulvinar enim ornare, nec lobortis enim lobortis. Ut eu ex neque. Vestibulum feugiat ligula et arcu rhoncus, quis maximus mauris pellentesque. Vivamus fermentum ultrices lacus vel vulputate. Morbi ultrices dolor nulla, ac lobortis nisl vestibulum sed. Vestibulum iaculis, lectus eget condimentum sodales, lorem nulla fermentum tellus, volutpat congue lacus dolor et quam. Phasellus ac risus blandit nisi rutrum suscipit non eu mauris. Vestibulum fringilla non neque vitae vestibulum.</p>
<p>Fusce quis vehicula purus, ut fermentum quam. Suspendisse cursus dui ac est convallis, sit amet egestas lorem sodales. Praesent nec nunc mattis, hendrerit mauris quis, dignissim nisi. Pellentesque semper faucibus urna vel tempus. Suspendisse egestas lacus ornare ligula mattis, et pulvinar urna sodales. Suspendisse tristique eget lacus sit amet dapibus. Nam quis imperdiet velit. Vestibulum consectetur rutrum tortor, sit amet fringilla nisi rhoncus id. Aenean sit amet odio elit. Nulla orci quam, eleifend quis sapien sed, vestibulum elementum urna. Sed dapibus ligula vitae turpis bibendum, in tempus magna bibendum. Aenean ut purus diam. Praesent porta velit ut dui fringilla egestas. Donec dignissim non sapien at imperdiet. Quisque bibendum massa ligula, vel elementum eros iaculis quis. Maecenas velit nisl, imperdiet vitae dui sed, convallis placerat enim.</p>
<p>Nunc mollis, massa scelerisque elementum condimentum, mauris ipsum accumsan purus, in semper leo erat vel turpis. Etiam varius feugiat diam eu sagittis. Curabitur dapibus sollicitudin dictum. In tincidunt at mauris vel dictum. Vivamus id imperdiet sem. Nam viverra ac massa ac ultricies. Nam condimentum commodo faucibus. Integer eget facilisis massa, sit amet vulputate purus. Duis in eros pulvinar eros porttitor pellentesque non volutpat dui. Nam laoreet scelerisque leo, accumsan porttitor tortor dignissim tempus. Nunc sit amet rutrum lorem. Cras malesuada risus sit amet aliquet vestibulum. Donec tellus nibh, pretium sed diam vitae, aliquet tempus risus.</p>
</div>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<i class="icon-ieicon"></i>
</div>
<div class="yt">
<i class="icon-ieicon"></i>
</div>
<div class="tw">
<i class="icon-ieicon"></i>
</div>
<div class="gplus">
<i class="icon-ieicon"></i>
</div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
Tutaj "css":
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;
}
.content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding-top: 10px;
}
.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;
Atu otworzony z "fontello":
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?23207983');
src: url('../font/fontello.eot?23207983#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?23207983') format('woff2'),
url('../font/fontello.woff?23207983') format('woff'),
url('../font/fontello.ttf?23207983') format('truetype'),
url('../font/fontello.svg?23207983#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?23207983#fontello') format('svg');
}
}
*/
[class$="icon-"]:before, [class*="icon- "]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.twittericon-:before { content: '\e800'; } /* '' */
.facebookicon-:before { content: '\f09a'; } /* '' */
.youtubeicon-:before { content: '\f167'; } /* '' */
.gplusicon-:before { content: '\f30f'; } /* '' */
Liczę na szybką pomoc :)