Clicky

Crea iconos sociales personalizados para tu sitio web

Perfect icons sociales

Perfect Icons es una eficiente herramienta que ayuda a crear iconos personalizados para los sitios web sociales

Trabajar en el diseño web es bastante difícil ya que estás con la gestión de clientes y tratar de manejar su tiempo y dinero, rara vez tienes esas horas libres para una tarea que podría tomar unos minutos. Como compañero desarrollador web Ivan Sugerman entiende esto y es por eso que ha creado Perfect Icons.

"Me di cuenta de la cantidad de tiempo que pasé creando iconos personalizados para los sitios web sociales. En promedio podría ser de hasta 30 minutos para cada sitio web", explica. "Cuando se crea uno o más sitios web a la semana realmente suma! Además, con las pantallas de ahora en distintas resoluciones las imágenes ya no son una opción viable".

"Me encanta este movimiento de eficiencia dentro de la comunidad de desarrolladores, ya que podemos dejar de gastar tiempo repetitivo de pequeñas cosas como los iconos sociales. Herramientas como esta ayudan a mover la industria del desarrollo web hacia adelante. Con la gran influencia que Internet tiene en nuestra vida cotidiana supongo que se podría decir que esta es mi pequeña manera de hacer del mundo un lugar mejor".

Uso

1) Descarga los archivos de fuentes en desde este archivo .zip. Extraer y cargar en tu directorio web.

2) Agrega el siguiente CSS a la hoja de estilos y establece la ruta correcta de los archivos de las fuentes y las imágenes:

@font-face {
    font-family:si;
    src:    url(PATH_TO/socicon-webfont.eot?#iefix)
                format(embedded-opentype),
            url(PATH_TO/socicon-webfont.woff) format(woff),
            url(PATH_TO/socicon-webfont.ttf) format(truetype),
            url(PATH_TO/socicon-webfont.svg#siregular) format(svg);
    font-weight:400;
    font-style:normal;
}

.soc {
    overflow:hidden;
}

.soc a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:inline-block;
    *display:inline;
    zoom:1;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 44px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: #ffffff;
    background-color: none;
}

.soc-icon-last{
    margin:0 !important;
}

.soc-twitter {
    background-color: #4da7de;
}
.soc-twitter:before {
    content: url(PATH_TO/imagen-twitter.jpg);
}
.soc-facebook {
    background-color: #3e5b98;
}
.soc-facebook:before {
    content: url(PATH_TO/imagen-facebook.jpg);
}
.soc-google {
    background-color: #d93e2d;
}
.soc-google:before {
    content: url(PATH_TO/imagen-google.jpg);
}
.soc-pinterest {
    background-color: #c92619;
}
.soc-pinterest:before {
    content: url(PATH_TO/imagen-pinterest.jpg);
}
.soc-linkedin {
    background-color: #3371b7;
}
.soc-linkedin:before {
    content: url(PATH_TO/imagen-linkedin.jpg);
}
.soc-rss {
    background-color: #f26109;
}
.soc-rss:before {
    content: url(PATH_TO/imagen-soc-rss.jpg);
}

3) Coloca el siguiente código HTML en donde deseas mostrar los iconos sociales. En mi caso de ejemplo he creado los siguientes iconos sociales.

<div class="soc">
    <a class="soc-twitter" href="http://twitter.com/apanados"></a>
    <a class="soc-facebook" href="https://www.facebook.com/vistaalmar"></a>
    <a class="soc-google" href="https://www.google.com/+Xn--apaados-6zaEs"></a>
    <a class="soc-pinterest" href="http://pinterest.com/vistaalmar/"></a>
    <a class="soc-linkedin" href="http://es.linkedin.com/in/jesuscaceres/"></a>
    <a class="soc-rss soc-icon-last" href="http://feeds.feedburner.com/apanados"></a>
</div>

Y aquí están los iconos que he creado:

Eso es todo! Ahora tiene  unos iconos sociales perfectos para tus páginas Web.

Echa un vistazo a Perfect Icons para probarlo por ti mismo.

Jesus_Caceres