Nesbet

Íconos de redes sociales

Códigos - Pagina Web gratis

Íconos de redes sociales c/efecto

Publicado por: nesbet

¡Hola amigos! En este post les voy a enseñar a añadir los siguientes íconos de las diferentes redes sociales a su página. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme.

vista previa

código css

Copiar y pegar el siguiente código entre las etiquetas <style> en algunos de los boxes que se encuentran en la configuración avanzada de los 'Ajustes de Diseño'. Si usted usa el diseño "CSS-Design" que ofrece el servicio, el código debe pegarlo en "CSS-Design sin Style Tags" ubicado también en la configuración avanzada de 'Ajustes de Diseño'.

a.socials {
display: inline-block;
margin-right: 0;
text-align: left;
text-indent: -9999px;
}
a.socials {
background-position: left bottom !important;
height: 34px;
width: 34px;
}

a.socials:hover {
background-position: left top !important;
}

a.facebook {
background: url("https://img.webme.com/pic/d/design-adri/facebook.png") no-repeat scroll 0 0 transparent;
}
a.rss {
background: url("https://img.webme.com/pic/d/design-adri/rss.png") no-repeat scroll 0 0 transparent;
}
a.delicious {
background: url("https://img.webme.com/pic/d/design-adri/delicious.png") no-repeat scroll 0 0 transparent;
}
a.flickr {
background: url("https://img.webme.com/pic/d/design-adri/flickr.png") no-repeat scroll 0 0 transparent;
}
a.stumble {
background: url("https://img.webme.com/pic/d/design-adri/stumble.png") no-repeat scroll 0 0 transparent;
}
a.vimeo {
background: url("https://img.webme.com/pic/d/design-adri/vimeo.png") no-repeat scroll 0 0 transparent;
}
a.youtube {
background: url("https://img.webme.com/pic/d/design-adri/youtube.png") no-repeat scroll 0 0 transparent;
}
a.twitter {
background: url("https://img.webme.com/pic/d/design-adri/twitter.png") no-repeat scroll 0 0 transparent;
}
a.linkedin {
background: url("https://img.webme.com/pic/d/design-adri/linkedin.png") no-repeat scroll 0 0 transparent;
}
a.skype {
background: url("https://img.webme.com/pic/d/design-adri/skype.png") no-repeat scroll 0 0 transparent;
}
a.lastfm {
background: url("https://img.webme.com/pic/d/design-adri/lastfm.png") no-repeat scroll 0 0 transparent;
}
a.myspace {
background: url("https://img.webme.com/pic/d/design-adri/myspace.png") no-repeat scroll 0 0 transparent;
}
a.tumblr {
background: url("https://img.webme.com/pic/d/design-adri/tumblr.png") no-repeat scroll 0 0 transparent;
}
a.digg {
background: url("https://img.webme.com/pic/d/design-adri/digg.png") no-repeat scroll 0 0 transparent;
}
a.quora {
background: url("https://img.webme.com/pic/d/design-adri/quora.png") no-repeat scroll 0 0 transparent;
}
a.dribble {
background: url("https://img.webme.com/pic/d/design-adri/dribble.png") no-repeat scroll 0 0 transparent;
}
a.forrst {
background: url("https://img.webme.com/pic/d/design-adri/forrst.png") no-repeat scroll 0 0 transparent;
}
a.google {
background: url("https://img.webme.com/pic/d/design-adri/google.png") no-repeat scroll 0 0 transparent;
}
a.ember {
background: url("https://img.webme.com/pic/d/design-adri/ember.png") no-repeat scroll 0 0 transparent;
}
a.pinterest {
background: url("https://img.webme.com/pic/d/design-adri/pinterest.png") no-repeat scroll 0 0 transparent;
}
a.bookmark {
background: url("https://img.webme.com/pic/d/design-adri/bookmark.png") no-repeat scroll 0 0 transparent;
}

código html

Copie y pegue el siguiente código html en donde desea que aparezca los íconos, están ordenados con respecto a la imagen de muestra. Lo que está señalado en verde, es el texto que debe editar.