juandelarce Posted October 6, 2014 Share Posted October 6, 2014 (edited) SOLUCIONADO Hola, me gustaria aprender a cambiar la apariencia de los iconos de Font Awesom. Por ejemplo el telefono del "header nav" cambiarle de color. En teoria el código de ese telefono según la página oficial "http://fortawesome.github.io/Font-Awesome/icon/phone/ es: <i class="fa fa-phone"></i> Pero yo voy a la ruta que me indica firebug: /home/mitienda/public_html/themes/default-bootstrap/css/global.css .icon-phone:before { me aparece: content: "\f095"; } donde el icono es "\f095" ¿Algien conoce la ruta de este código y la correspondencia con los iconos de Font Awesom? Agradecido de antemano Edited October 22, 2014 by juandelarce (see edit history) Link to comment Share on other sites More sharing options...
shacker Posted October 11, 2014 Share Posted October 11, 2014 (edited) la Awasome viene de aqui https://icomoon.io/app/#/select Prestashop incluye todos los iconos por defecto. Solo debes crear un nuevo proyecto, importar los iconos de prestashop con la fuente .svg, añades mas iconos, y generas la font (te dara el nuevo codigo para el icono que agregaste) o le cambias el codigo manualmente luego lo cambias en el CSS Edited October 11, 2014 by shacker (see edit history) 1 Link to comment Share on other sites More sharing options...
Fernando91 Posted October 13, 2014 Share Posted October 13, 2014 si quieres cambiarle de colo tienes q poner por ejemplo <i style="color:red" class="fa fa-xxx"> </i> 1 Link to comment Share on other sites More sharing options...
juandelarce Posted October 14, 2014 Author Share Posted October 14, 2014 Gracias a los dos por contestar. Lo que no entiendo es donde está ese código del que hablas, que debe ser el que yo te digo content: "\f095"; En una prueba en el css del Global, si yo cambio en vez de "\f095" a "\f097", aparece otro icono. Donde están esas imagenes, mejor dicho fuentes icónicas, y que código tiene cada una. Me podeis dar las ruta? Gracias de nuevo Link to comment Share on other sites More sharing options...
JuDrYa Posted October 15, 2014 Share Posted October 15, 2014 (edited) Haber... Si te fijas en el "firebug" este te indica... EL ICONO... /home/mitienda/public_html/themes/default-bootstrap/css/global.css .icon-phone:before { content: "\f095"; } EL COLOR... /home/mitienda/public_html/themes/default-bootstrap/css/modules/blockcontact/blockcontact.css .shop-phone i { color: white; font-size: 21px; line-height: 21px; padding-right: 7px; } En el global.css, desde la linea 4135 en adelante tienes todos los códigos. ¿Que representa cada código? http://fortawesome.github.io/Font-Awesome/icons/ http://astronautweb.co/snippet/font-awesome/ Edited October 15, 2014 by JuDrYa (see edit history) 1 Link to comment Share on other sites More sharing options...
shacker Posted October 15, 2014 Share Posted October 15, 2014 en la web que te pase, al importar la fuente , puedes ver a que icono correcponde cada codigo 1 Link to comment Share on other sites More sharing options...
juandelarce Posted October 22, 2014 Author Share Posted October 22, 2014 Muchisimas gracias JuDrYa por tu larga y pedagogica explicación y a sahcker y fernando po interesarse. Abrazos Link to comment Share on other sites More sharing options...
ventura Posted October 22, 2014 Share Posted October 22, 2014 Solo añadir que la plantilla default lleva la version de fontawesome 3.2.1 y que sus clases son estas http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ 1 Link to comment Share on other sites More sharing options...
juandelarce Posted October 25, 2014 Author Share Posted October 25, 2014 Gracias Ventura Link to comment Share on other sites More sharing options...
froz Posted August 14, 2015 Share Posted August 14, 2015 Se que es un tema antiguo, pero me surge una duda al respecto. ¿Cómo puedo cambiar el icono fa-home? ¿puedo decirle que coja uno mío específico? De ser así, ¿cómo podría hacerlo? Muchas gracias! Link to comment Share on other sites More sharing options...
ventura Posted August 14, 2015 Share Posted August 14, 2015 En el archivo themes\tu_tema\breadcrumb.tpl tienes que tener esto o algo parecido <i class="icon-home"></i> para cambiar de icono del mismo tipo cambia la clase. Dependiendo de la version que tengas de Prestashop cambia la version tambien de Fontawesome y las classes de los iconos http://fortawesome.github.io/Font-Awesome/icons/ Link to comment Share on other sites More sharing options...
froz Posted August 14, 2015 Share Posted August 14, 2015 Gracias por la respuesta pero no me ha aclarado mucho.... A ver imaginemos que yo me he currado por mi cuenta un icono y en vez de la casita que sale por defecto quiero que aparezca ese mío. Entiendo que debo acceder a la clase icon-home y tocar ahí. .icon-home:before{ content:"·"; } Entiendo (corrígeme si no es así que soy nuevo en esto )que la propiedad content te muestra contenido dinámico del Fontawesome y que el punto hace referencia al fa-home y selecciona el que está por defecto. ¿Cómo debo proceder yo para que mi icono creado de la nada se muestre ahí en vez de la casita? ¿En qué lado lo subo y que propiedad utilizo para mostrarlo (content también)? Mi versión es la 1.6 por cierto, no sé si cambia algo. Muchas gracias por tu atención y paciencia. Link to comment Share on other sites More sharing options...
ventura Posted August 14, 2015 Share Posted August 14, 2015 Lo mas practico es editar el .tpl indicado y cambiar la clase del icono por la imagen que quieras poner Link to comment Share on other sites More sharing options...
froz Posted August 17, 2015 Share Posted August 17, 2015 Vale, lo conseguí creando una nueva clase y cambiando el content de la misma en el .css. ¡¡¡Muchas gracias por las contestaciones, ventura!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now