Como cambiar los iconos de siguenos en redes sociales en 1.6

verdemusgo · April 28, 2014

Hola,

Quiero cambiar los iconos por defecto que salen en el footer de la pagina en el block social.
Utilizo prestashop 1.6 y estoy creando mi propio theme a partir del bootstrap.

He encontrado en el foro referencia a algo parecido pero alli direccionaba a una ubicacion donde modificar el png y listo, pero en mi caso parece que no funciona asi. Esto es lo que he encontrado en el global.css

.footer-container #footer #social_block ul li a:before {
              display: inline-block;
              font-family: "FontAwesome";
              vertical-align: -5px; }
            .footer-container #footer #social_block ul li a:hover {
              color: white; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }

hace referencia a unas fuentes llamadas fontawesome.

Como puedo modificarlo para poder poner la imagen de icono que yo quiera?

Muchas gracias

ventura · April 29, 2014

Para cambiar o añadir iconos de la fuente Fontawesome que incluye por defecto Bootstrap solo tienes que añadir en la propiedad

before {
            content: "codigo deseado";

Cualquiera de estos codigos

http://astronautweb.co/snippet/font-awesome/

verdemusgo · April 29, 2014

Gracias Ventura por la respuesta, pero lo que yo queria no es cambiar por otra fuente de fontawesome sino, poner unas imagenes personalizadas en los iconos.

Alguien sabe como hacerlo?

ventura · April 30, 2014

Gracias Ventura por la respuesta, pero lo que yo queria no es cambiar por otra fuente de fontawesome sino, poner unas imagenes personalizadas en los iconos.

Alguien sabe como hacerlo?

En ese caso solo tienes que utilizar la misma propiedad con la ruta de la imagen

before {
            content: url("../img/imagen_personalizada.png");;

La imagen deberá estar en la carpeta img del theme que utilices

verdemusgo · May 1, 2014

En ese caso solo tienes que utilizar la misma propiedad con la ruta de la imagen
before {
            content: url("../img/imagen_personalizada.png");;
La imagen deberá estar en la carpeta img del theme que utilices

Ya he podido poner las imagenes que queria, pero he tenido que poner la ruta de la pagina entera porque poniendola relativa como tu me indicabas no me funcionaba.

Muchas gracias Ventura

hunterF · July 2, 2014

verdemusgo te queria hacer una pregunta, ¿como has movido el bloque de siganos fuera del footer?

Muchas gracias

chemamor · July 17, 2014

He cambiado un icono pero no tiene el efecto de cambiar la imagen cuando pasas el ratón por encima.

Quiero introducir ese efecto pero no se como hacerlo.

Gracias, un saludo.

JuDrYa · July 18, 2014

Para no tener que poner la ruta entera y poner la ruta hacia la carpeta "img" de tu theme, la ruta hacia la imagen debe ser sin comillas dobles, tal que asi...

background: url(../img/imagen.gif);

Para que te cambie la imagen al pasar el ratón...

En el "global.css" sobre la linea 6884...

Tienes esto...

          .footer-container #footer #social_block ul li a:hover {
              color: white; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }

... cambialo por...

          .footer-container #footer #social_block ul li.facebook:hover {
            background: url(../img/icon-social/facebookhover.png) no-repeat; }
          .footer-container #footer #social_block ul li.twitter:hover {
            background: url(../img/icon-social/twitterhover.png); }
          .footer-container #footer #social_block ul li.rss:hover {
            background: url(../img/icon-social/rsshover.png); }
          .footer-container #footer #social_block ul li.youtube:hover {
            background: url(../img/icon-social/youtubehover.png); }
          .footer-container #footer #social_block ul li.google-plus:hover {
            background: url(../img/icon-social/googlehover.png); }
          .footer-container #footer #social_block ul li.pinterest:hover {
            background: url(../img/icon-social/pinteresthover.png); }
          .footer-container #footer #social_block ul li.facebook {
            background: url(../img/icon-social/facebook.png) no-repeat; }
          .footer-container #footer #social_block ul li.twitter {
            background: url(../img/icon-social/twitter.png) no-repeat; }
          .footer-container #footer #social_block ul li.rss {
            background: url(../img/icon-social/rss.png) no-repeat; }
          .footer-container #footer #social_block ul li.youtube {
            background: url(../img/icon-social/youtube.png) no-repeat; }
          .footer-container #footer #social_block ul li.google-plus {
            background: url(../img/icon-social/google.png) no-repeat; }
          .footer-container #footer #social_block ul li.pinterest {
            background: url(../img/icon-social/pinterest.png) no-repeat; }

Mete en la carpeta "img" de tu "theme", una carpeta llamada "icon-social" con todas las imagenes de las redes sociales (facebbok, google+, pinterest, rss, twitter, youtube).

Ten en cuenta que tienes que meter 2 por cada red social, por ejemplo:

facebook.png ==> que es la que sale por defecto

facebookhover.png ==> que es la que aparece al pasar el ratón

Sobre la linea 6861, tienes esto...

        .footer-container #footer #social_block ul li {
          float: left;
          width: 40px;
          text-align: center; }

... cambiale el atributo "width" por el ancho de tu imagen, añadele el atributo "height" con la altura de tu imagen y añadele "margin-right: 5px;", con lo que quedaria...

        .footer-container #footer #social_block ul li {
          float: left;
          width: 40px; /* CAMBIA POR EL ANCHO DE TU IMAGEN */
          height:40px; /* CAMBIA POR LA ALTURA DE TU IMAGEN */
          margin-right: 5px;
          text-align: center; }

Edited July 18, 2014 by JuDrYa (see edit history)

ladcb · August 25, 2014

Hola,

Quiero cambiar los iconos por defecto que salen en el footer de la pagina en el block social.

Utilizo prestashop 1.6 y estoy creando mi propio theme a partir del bootstrap.

He encontrado en el foro referencia a algo parecido pero alli direccionaba a una ubicacion donde modificar el png y listo, pero en mi caso parece que no funciona asi. Esto es lo que he encontrado en el global.css

.footer-container #footer #social_block ul li a:before {

              display: inline-block;

              font-family: "FontAwesome";

              vertical-align: -5px; }

            .footer-container #footer #social_block ul li a:hover {

              color: white; }

          .footer-container #footer #social_block ul li.facebook a:before {

            content: "\f09a"; }

          .footer-container #footer #social_block ul li.twitter a:before {

            content: "\f099"; }

          .footer-container #footer #social_block ul li.rss a:before {

            content: "\f09e"; }

          .footer-container #footer #social_block ul li.youtube a:before {

            content: "\f167"; }

          .footer-container #footer #social_block ul li.google-plus a:before {

            content: "\f0d5"; }

          .footer-container #footer #social_block ul li.pinterest a:before {

            content: "\f0d2"; }

hace referencia a unas fuentes llamadas fontawesome.

Como puedo modificarlo para poder poner la imagen de icono que yo quiera?

Muchas gracias

en lugar de esas etiquetas deberias colocar el siguiente codigo en para cada red social

</a>

Megabyte · September 30, 2015

Hola, He seguido los pasos detallados y todo perfecto excepto por una cosa no puedo clickar en los iconos, si que hacen el cambio entre los dos iconos pero no puedo clickar en la web sale la flechita pero no se transforma en la mano por lo tanto no se abren los enlaces a las redes sociales.

Alguien con un problema semejante?

Os pego el codigo que he cambiado:

.footer-container #footer #social_block ul li.facebook:hover {

background: url(../img/icon-social/facebookhover.png);}

.footer-container #footer #social_block ul li.twitter:hover {

background: url(../img/icon-social/twitterhover.png); }

.footer-container #footer #social_block ul li.rss:hover {

background: url(../img/icon-social/bloggerhover.png); }

.footer-container #footer #social_block ul li.youtube:hover {

background: url(../img/icon-social/youtubehover.png); }

.footer-container #footer #social_block ul li.google-plus:hover {

background: url(../img/icon-social/googleplushover.png); }

.footer-container #footer #social_block ul li.pinterest:hover {

background: url(../img/icon-social/pinteresthover.png); }

.footer-container #footer #social_block ul li.vimeo:hover {

background: url(../img/icon-social/vimeohover.png); }

.footer-container #footer #social_block ul li.instagram {

background: url(../img/icon-social/instagramhover.png); }

.footer-container #footer #social_block ul li.facebook {

background: url(../img/icon-social/facebook.png) no-repeat; }

.footer-container #footer #social_block ul li.twitter{

background: url(../img/icon-social/twitter.png) no-repeat; }

.footer-container #footer #social_block ul li.rss {

background: url(../img/icon-social/blogger.png) no-repeat; }

.footer-container #footer #social_block ul li.youtube {

background: url(../img/icon-social/youtube.png) no-repeat; }

.footer-container #footer #social_block ul li.google-plus{

background: url(../img/icon-social/googleplus.png) no-repeat; }

.footer-container #footer #social_block ul li.pinterest {

background: url(../img/icon-social/pinterest.png) no-repeat; }

.footer-container #footer #social_block ul li.vimeo {

background: url(../img/icon-social/vimeo.png) no-repeat; }

.footer-container #footer #social_block ul li.instagram {

background: url(../img/icon-social/instagram.png) no-repeat; }

Gracias

germank · November 3, 2015

Hola, He seguido los pasos detallados y todo perfecto excepto por una cosa no puedo clickar en los iconos, si que hacen el cambio entre los dos iconos pero no puedo clickar en la web sale la flechita pero no se transforma en la mano por lo tanto no se abren los enlaces a las redes sociales.

Alguien con un problema semejante?

Os pego el codigo que he cambiado:

.footer-container #footer #social_block ul li.facebook:hover {

background: url(../img/icon-social/facebookhover.png);}

.footer-container #footer #social_block ul li.twitter:hover {

background: url(../img/icon-social/twitterhover.png); }

.footer-container #footer #social_block ul li.rss:hover {

background: url(../img/icon-social/bloggerhover.png); }

.footer-container #footer #social_block ul li.youtube:hover {

background: url(../img/icon-social/youtubehover.png); }

.footer-container #footer #social_block ul li.google-plus:hover {

background: url(../img/icon-social/googleplushover.png); }

.footer-container #footer #social_block ul li.pinterest:hover {

background: url(../img/icon-social/pinteresthover.png); }

.footer-container #footer #social_block ul li.vimeo:hover {

background: url(../img/icon-social/vimeohover.png); }

.footer-container #footer #social_block ul li.instagram {

background: url(../img/icon-social/instagramhover.png); }

.footer-container #footer #social_block ul li.facebook {

background: url(../img/icon-social/facebook.png) no-repeat; }

.footer-container #footer #social_block ul li.twitter{

background: url(../img/icon-social/twitter.png) no-repeat; }

.footer-container #footer #social_block ul li.rss {

background: url(../img/icon-social/blogger.png) no-repeat; }

.footer-container #footer #social_block ul li.youtube {

background: url(../img/icon-social/youtube.png) no-repeat; }

.footer-container #footer #social_block ul li.google-plus{

background: url(../img/icon-social/googleplus.png) no-repeat; }

.footer-container #footer #social_block ul li.pinterest {

background: url(../img/icon-social/pinterest.png) no-repeat; }

.footer-container #footer #social_block ul li.vimeo {

background: url(../img/icon-social/vimeo.png) no-repeat; }

.footer-container #footer #social_block ul li.instagram {

background: url(../img/icon-social/instagram.png) no-repeat; }

Gracias

Hola, tengo el mismo problema que tú, no sé si lograste solucionarlo, si es así, me darías una ayuda?. gracias

germank · November 4, 2015

alguien me podría ayudar por favor?

Megabyte · November 5, 2015

alguien me podría ayudar por favor?

Hola compañero, aún no tengo una solución por que tengo algún problema más que no acabo de solucionar, con al versión 1.6.1, si encuentro la solución te la paso!

germank · November 9, 2015

Hola compañero, aún no tengo una solución por que tengo algún problema más que no acabo de solucionar, con al versión 1.6.1, si encuentro la solución te la paso!

gracias, la verdad por más que busco no logro encontrar la solución

germank · November 17, 2015

alguien que nos pueda dar una mano por favor? =/

jjryeste · May 18, 2016

Hola, me sucede lo mismo, alguien pudo arreglarlo, un saludo , Gracias

Como cambiar los iconos de siguenos en redes sociales en 1.6

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in