social icon

bardzo ładne ikonki możemy uzyskać dzięki genericons.

pobieramy pliki czcionki i zamieszczamy je razem z dołaczonym plikiem genericons.css w plikach strony.

 

w kodzie html zamieszczamy w head:

<link rel="stylesheet" type="text/css" href="css/genericons.css">

oraz w kodzie w meijscu w jakim ma znajdować się ikona:

<a class="social" href="http://www.pinterest.com/GingerAgnieszka/photography-inspiration/"></a>

<a class="social" href="https://www.facebook.com/pages/Inspiracje-fotograficzne/786084231414782"></a>

<a class="social" href="https://instagram.com/agnieszkagingerart/"></a>

<a class="social mail" href="mailto:agnieszka@ginger-art.pl"></a>

 

w stylach dajemy:

.social {
	display: inline-block;
	width:50px;
	height:50px;
	border-radius: 50%;
	background-color: @baseWhite;
	color: @baseBlack;
	font-size: 18px;
	vertical-align: middle;
	text-align: center;
	-moz-transition: color .1s ease-in 0;
	-webkit-transition: color .1s ease-in 0;	
	font-family: "Genericons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	text-decoration: none;;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	speak: none;
}

.social[href*="pinterest.com"]:before {
	content: "\f209";
}
.social[href*="facebook.com"]:before {
	content: "\f204";
}
.social[href*="instagram.com"]:before {
	content: "\f215";
}
.social[href*="linkedin.com"]:before {
	content: "\f208";
}
.social[href*="tumblr.com"]:before {
	content: "\f214";
}
.social[href*="twitter.com"]:before {
	content: "\f202";
}
.social[href*="mailto:"]:before, .social-navigation a.mail:before {
	content: "\f410";
}

–