Buenas tardes de nuevo.
Nos gustaría que en la barra del menú horizontal superior, en lugar de que apareciese "home" nos gustaría que apareciese un icono de una casa., y así sucesivamente con el resto de enlaces.
En lugar de envío, un icono de transporte...
Estamos utilizando la plantilla cilene, no se si eso influye.
Muchas gracias.
URL del sitio: Contenido solo visible a usuarios registrados
Hola
Te refieres al menú de inicio en :
http://demopacktienda.webempresa.eu/prestashop_cilene/index.php
Puedes agregar iconos por CSS y FontAwesom que veo que ya carga el theme, por ejemplo el siguiente código define que para los items de menú se agregará iconos antes del enlace:
#block_top_menu .sf-menu li a:before{ font-family:"FontAwesome"; display:inline; margin-right:5px; }
Luego este código de complemento agerga un icono de casa para el inicio es decir el li:nth-child(1), para el segundo seria li:nth-child(2), etc
#block_top_menu .sf-menu li:nth-child(1) a:before{ content: "f015"; }
Estos códigos puedes agregarlos al final del archivo :
/themes/Cilene/css/customuser.css
Ahora bien de donde sacas estos valores de "f015", etc
Si buscas en tu archivo :
Contenido solo visible a usuarios registrados , por ejemplo busca .icon-home, verás igualmente que hay varios iconos ya definidos
Saludos.
Muchisimas gracias por contestar tan rápido, pero por favor, si pudieras indicarme como hacer todos esos cambios...no tengo ni idea de programación.
Dime paso a paso como realizarlo.
Gracias.
Hola
Para que pruees que funciona ubica este archivo :
/themes/Cilene/css/customuser.css
Puedes usar el Administrador de Archivos de tu Cpanel para ubicar y editar este archivo, revisa :
https://www.webempresa.com/blog/administrador-de-archivos-de-cpanel-como-buscar-archivos.html
Al final de todo coloca el código CSS que te adjuntè:
#block_top_menu .sf-menu li a:before{ font-family:"FontAwesome"; display:inline; margin-right:5px; } #block_top_menu .sf-menu li:nth-child(1) a:before{ content: "f015"; }
La última porción de código hace que aparezca un icono de casa en el inicio de tu sitio, verifica si aparece
Si quieres otro icono, sería un código similar al código final cambiando el 1 por el ítem de menú y el content, el content como te comenté lo puedes conseguir del archivo gobal.css , aqui busca clases con .icon- , por ejemplo .icon-home, etc.
Aunque no es exactamente lo mismo, este artículo te puede servir de referencia:
https://decodecms.com/insertar-una-fuente-de-iconos-en-wordpress/
Especialmente el punto 4 en donde se usa el content.
Saludos.
Buenos días
He seguido sus indicaciones pero me pregunta la codificación de caracteres que utilizar:
Vienen preseleccionado UTF-8, debo elegir esa o tiene que ser otra de la lista desplegable que viene?
Siento preguntar tanto pero al no saber, tengo miedo de estropear algo.
Gracias
Hola Sandro, Buenos Días.
No te preocupes, tienes todo el derecho a preguntar lo que te haga falta, nosotros estamos parea eso 😉
debo elegir esa o tiene que ser otra de la lista desplegable que viene?
Por defecto siempre te aparecera UTF-8, no tienes que cambiar nada.
Un saludo
Acabo de insertar el código pero sigue sin aparecer la casa en lugar de inicio.
Adjunto un pantallazo de la tienda, marcando donde quiero sustituir las letras por iconos y otro con la modificación que he hecho en el código.
Si es muy complicado lo dejo para no liar alguna.
HOla
En tu captura de pantalla reciente veo que si lograste insertar el còdigo pero lo insertaste dentro de /* */
En CSS estos son comentarios, debes insertarlo fuera de estas etiquetas de comentarios, es decir borra /* y */, del inicio y final de tu còdigo
Luego para que veas los cambios refresca tu navegador, debería aparecer un icono de casa al costado del texto inicio
Saludos.
Muchas gracias, ya aparece la casa junto al inicio. Mi intención es cambiar la palabra inicio, por la casa y asi sucesivamente con el blog, transporte y contacto.
Ese icono lo podría poner mas grande??
Y para el resto de palabras, como el blog, transporte y contacto, el archivo a modificar es el mismo?? Pongo el mismo código debajo del que he insertado variando lo que indique la imagen??
Gracias
Hola
Lo más práctico es poner un icono delante del texto de cada item de menú
Si quieres eliminar el texto inicio lo veo más complicado, el problema es por la estructura que se crea.
Ten en cuenta que por accesibilidad es bueno que se vea el texto de al opcion
Si quieres seguir repitiendo iconos a las otras opciones de menú debes usar este código repetidamente :
#block_top_menu .sf-menu li:nth-child(1) a:before{ content: "f015"; }
Evidentemente debes variar el númer 1 por el número de item y el content, que representa el icono, anteriormente te había indicado en donde buscar el content, en tu archivo global.css
Saludos
Perfecto, asi lo hare, dejando también el texto. Pero me podrías indicar donde busco los iconos que me indicas abajo?? En el administrador de archivos, o en prestashop o donde??
"Si buscas en tu archivo :
Este texto está oculto para usuarios no registrados
view-source: http://demopacktienda.webempresa.eu/prestashop_cilene/themes/Cilene/css/global.css
, por ejemplo busca .icon-home, verás igualmente que hay varios iconos ya definidos"
Hola
Si colocas esta url en la barra de direcciones de tu navegador :
view-source: http://demopacktienda.webempresa.eu/prestashop_cilene/themes/Cilene/css/global.css
Verás que aparece código CSS, luego si buscas (ctrl + ), y colocas esto : .icon-glass (este es el icono inicial en el código)
Verás que cada .icon-xxx tiene un content diferente, es este content que debes usar, por ejemplo si quieres poner otro icono de un signo más, usarías .icon-plus-sign , entonces tu código quedaría como:
#block_top_menu .sf-menu li:nth-child(2) a:before{ content: "f055"; }
date cuenta que el .icon-plus-sign tiene el content f055 en el archivo global.css
Saludos.