• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Html, css i fontello

VPS Starter Arubacloud
0 głosów
659 wizyt
pytanie zadane 26 lipca 2017 w HTML i CSS przez Farmer Obywatel (1,150 p.)

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 :)

2 odpowiedzi

0 głosów
odpowiedź 26 lipca 2017 przez sc4rface Dyskutant (7,710 p.)
Jak wygląda Twój katalog ze stroną? Zrób screen-shota.
komentarz 26 lipca 2017 przez Farmer Obywatel (1,150 p.)
??? nie rozumiem xd
komentarz 26 lipca 2017 przez sc4rface Dyskutant (7,710 p.)
No folder, w którym masz index.html i tak dalej - podejrzewam, że pieprznąłeś się w ścieżce do katalogu fontello.
komentarz 26 lipca 2017 przez Farmer Obywatel (1,150 p.)
plik  fontello.css  czyli ten w którym są ikonki siedzi w folderze  css  który z kolei siedzi w folderze  fontello  na pulpicie

a  index.html  jest umieszczony w folderze pod nazwą  www  w kolejnym folderze na pulpicie który zwie się  www4
komentarz 26 lipca 2017 przez sc4rface Dyskutant (7,710 p.)
<link href="css/fontello2.css" rel="stylesheet" type="text/css" />

Czyli dobrze myślałem, bo dowiązanie pliku naprowadza na taki folder wg. ścieżki, więc - albo wrzuć folder css z plikami fontello do folderu z plikami strony, bądź zmień ścieżkę w linku do niego.
komentarz 26 lipca 2017 przez Farmer Obywatel (1,150 p.)
em... tak jakby nie pykło
komentarz 26 lipca 2017 przez Farmer Obywatel (1,150 p.)

zastanawia mnie też to że u pana Mirka wygląda to tak (w fontello.css otwartym w notepadzie):

 

a u mnie tak:

 

 

to takie "kolorowe" na dole

komentarz 26 lipca 2017 przez sc4rface Dyskutant (7,710 p.)
Emm... Bo pewnie znowu źle wkleiłeś, popatrz dobrze na ścieżkę do pliku.
komentarz 26 lipca 2017 przez Farmer Obywatel (1,150 p.)
NIE DZIAŁA :(((((((((

juz jurde nwm co mam robić
0 głosów
odpowiedź 26 lipca 2017 przez Kamil Czech Dyskutant (7,700 p.)
Prawdopodobnie zła ścieżka w index.html do fontello.css

Podobne pytania

0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 24 sierpnia 2018 w HTML i CSS przez exim Nowicjusz (140 p.)
0 głosów
4 odpowiedzi 513 wizyt
pytanie zadane 22 lutego 2017 w HTML i CSS przez Mariusz Andrzejewski Początkujący (360 p.)
0 głosów
3 odpowiedzi 280 wizyt
pytanie zadane 14 kwietnia 2016 w Systemy operacyjne, programy przez BanditPlayGame Użytkownik (680 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...