Problem z ikonami fontello

pytanie zadane 24 czerwca 2015 w HTML i CSS przez Mieszko I Stary wyjadacz (10,980 p.)

Mam taki problem, że używam na moich stronach internetowych ikon z fontello do social linków. Ikony te raz wyświetlają się, a raz nie. Wszystko zrobiłem tak jak na filmie u pana Mirosława Zelenta. Nie wiem czym to jest spowodowane.

ps.

Raz robiłem coś na stronie i dodałem jakieś elementy do tej strony i odświeżyłem stronę. Przed odświeżeniem wyświetlały się, a po odświeżeniu już się nie wyświetlały. Pracowałem jednak nad zawartością tekstu a nie nad tymi ikonami.

Jeśli to coś pomoże, strona ta jest na razie w fazie testów i jest ona umieszczona na serwerze localhost.

4 odpowiedzi

odpowiedź 24 czerwca 2015 przez artimal Gaduła (4,800 p.)
wybrane 24 czerwca 2015 przez Mieszko I

Najlepsza

Mnie jako początkującego fontello jakoś zniechęciło. Poszukałem strony z której można ściągać pliki grafiki wektorowej a następnie je sobie edytowałem dodając np. coś takiego aby uzsykać porządany rozmiar i wypełnienie kolorem:

width="25px" height="25px" fill="#ffffff"

Następnie w dokumencie html wklejałem:

<img src="tutaj adres, np: ikonki/calendar.svg" type="image/svg+xml"/>

I działa świetnie. Gorzej z grafiką robioną przeze mnie w corelu, jesli chcecie zmieniac kolor w nij to już w corelu a nie poprzez mieszanie w kodzie.

komentarz 24 czerwca 2015 przez Comandeer Guru (601,930 p.)

Potwierdzam, ikonki SVG dają o wiele więcej możliwości: https://css-tricks.com/icon-fonts-vs-svg/

odpowiedź 24 czerwca 2015 przez kilof_45 Obywatel (1,060 p.)

Wrzuć kod HTML i CSS, wtedy będzie dużo łatwiej czemuś zaradzić.

komentarz 24 czerwca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Strona główna mojej strony:

<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<meta charset="utf-8" />
		<title>InternetFamilyTree</title>
		
		<link rel="stylesheet" href="style.css" type="text/css" />
		<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/fontello.css" type="text/css" />
		
		<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
		
		<script src="script.js" type="text/javascript"></script>
		
	</head>
	
	<body>
		<div class="wrapper">
		
			<div class="header">
			
				<div class="logo">
					<span style="color: orange;">PolishInternetFamilyTree.pl </span><span style="color: lightblue;">- darmowe internetowe drzewo genealogiczne</span>
				</div>
				
			</div>
				
				<div class="nav">
					<ol>
						<li><a href="index.html">Strona Główna</a></li>
						<li><a href="#">Co nowego</a></li>
						<li><a href="#">Panel logowania</a>
							<ul>
								<li><a href="logowanie.php">Logowanie</a></li>
								<li><a href="rejestracja.php">Rejestracja</a></li>
								<li><a href="informacje.php">Informacje</a></li>
								<li><a href="regulamin.php">Regulamin</a></li>
							</ul>
						</li>
						<li><a href="#">Panel dla gościa</a>
							<ul>
								<li><a href="#">Drzewo próbne</a></li>
								<li><a href="#">Samouczek</a></li>
								<li><a href="#">Programy na komputer</a></li>
							</ul>
						</li>
						<li><a href="#">Pomoc</a>
							<ul>
								<li><a href="#">O obsłudze drzewa</a></li>
								<li><a href="#">O stronie</a></li>
							</ul>
						</li>
						<li><a href="#">O autorach</a></li>
					</ol>
				</div>
				
				<div class="content">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla ligula commodo lectus semper finibus. Morbi non porttitor nisi. Aliquam erat volutpat. Aenean imperdiet arcu eget augue ultrices vehicula. Nullam varius metus augue, vel faucibus eros dignissim vel. Donec feugiat, arcu et pharetra volutpat, dolor nulla dignissim libero, sit amet blandit ligula urna vitae lacus.
				</div>
				<br />
				<div class="social">
				
					<div class="socialdivs">
						<div class="fb"><i class="icon-facebook"></i></div>
						<div class="yt"><i class="icon-youtube"></i></div>
						<div class="tw"><i class="icon-twitter"></i></div>
						<div class="gplus"><i class="icon-gplus"></i></div>
						<div style="clear: both;"></div> 
					</div>
					
				</div>
				
				<div class="footer">
					PolishInternetFamilyTree.pl. Strona w sieci od 2015 roku &copy wszelkie prawa zastrzeżone!
				</div>
			</div>
			
	</body>
</html>

Plik style.css:

body
{
	font-family: 'Lato', sans-serif;
	background-color: #303030;
	font-size: 18px;
	color: white;
	margin: 0 !important;
}

.wrapper
{
	width: 100%;
}

.header
{
	width: 100%;
	padding: 40px 0;
}

.logo
{
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	font-size: 24px;
	text-align: center;
}

.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;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}

.social
{
	width: 100%;
	text-align: center;
	background-color: #292929;
}

.socialdivs
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.fb
{
	float: left;
	width: 250px;
	height: 155px;
}

.fb:hover
{
	background-color: #4668b3;
}

.yt
{
	float: left;
	width: 250px;
	height: 155px;
}

.yt:hover
{
	background-color: #d94348;
}

.tw
{
	float: left;
	width: 250px;
	height: 155px;
}

.tw:hover
{
	background-color: #3095d3;
}

.gplus
{
	float: left;
	width: 250px;
	height: 155px;
}

.gplus:hover
{
	background-color: #d95333;
}

.footer
{
	text-align: center;
	background-color: #222222;
	padding: 30px;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 100;
}

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-style: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}

ol a
{
	color: white;
	text-decoration: none;
	display: block;
}

ol > li
{
	float: left;
	width: 150px;
	height: 40px;
	border-right: 1px dashed #751b1b;
}

ol > li:first-child
{
	border-left: 1px dashed #751b1b;
}

ol > li:hover
{
	background-color: #cf6969;
}

ol > li:hover > a
{
	color: #451717;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}

ol > li:hover > ul
{
	display: block;
}

ol > li > ul > li
{
	background-color: #cf6969;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #751b1b;
}

ol > li > ul > li:hover
{
	background-color: #c34f4f;
}

ol > li > ul > li:hover > a
{
	color: #222222;
}

plik fontello.css:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?53826648');
  src: url('../font/fontello.eot?53826648#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?53826648') format('woff'),
       url('../font/fontello.ttf?53826648') format('truetype'),
       url('../font/fontello.svg?53826648#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?53826648#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); */
}
 
.icon-youtube:before { content: '\e800'; font-size: 72px; margin-top: 40px;} /* '' */
.icon-twitter:before { content: '\e801'; font-size: 72px; margin-top: 40px;} /* '' */
.icon-gplus:before { content: '\e802'; font-size: 72px; margin-top: 40px;} /* '' */
.icon-facebook:before { content: '\e803'; font-size: 72px; margin-top: 40px;} /* '' */

odpowiedź 24 czerwca 2015 przez kilof_45 Obywatel (1,060 p.)

U mnie wszystko w porządku, a skoro robiłeś wszystko tak jak Pan Mirosław, to nie powinno być problemów z samym kodem, chociaż i tak zauważyłem jeden błąd w sekcji head. Zamień sobie kod z linijki 8 na ten

<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

To tak tylko gwoli ścisłości, bo przeglądarka kompiluje resztę kodu bez problemu.

komentarz 24 czerwca 2015 przez Comandeer Guru (601,930 p.)

To akurat błąd autolinkowania na tym forum :/

komentarz 24 czerwca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Tą linijkę skopiowałem z Google Fonts.

komentarz 24 czerwca 2015 przez Comandeer Guru (601,930 p.)

Chodzi mi o ten błąd z linii 8 ;)

odpowiedź 9 października 2015 przez maciek79 Nowicjusz (140 p.)

Widze że pytanie padło jakiś czas temu,ale mimo to chciałbym podzielić się moim problemem z z fontello.
Stronę uruchamiałem na apache2 gnome 8 kali linux i na stronie nie ukazały się ikony.Ale na windows 7 na xampp-ie w przegladarce chrom też wystepował ten problem ale w internet explorer było na xampp-ie ok.

Za to na apache2 uruchamianym komedą "service apache2 start" po uprzednim wrzuceniu plików do katalogu /var/www wystepują nadal problemy z ikonami.Problem rozwiązałem zakładając strone na darmowym hostingu i przy okazji testuje stronę z mojego telefonu z Androidem..

"W programowaniu to ostatecznie człowiek popełnia błedy nie komputer"

Pozdrawiam