Problema al utilizar fuente entypo con ::before
Al utilizar la fuente entypo ( fuente iconos) en una web , no encontramos con el problema que se ve de distinta forma en varios navegadores y varios sistemas operativos.
Ubuntu - Mozilla
Mozilla - IOS
Chrome - IOS
Chrome - Windows
Chromium - Ubuntu
El codigo de html que utilizo es:
<div class="pie">
<span class="direccion"></span>
Plaza Rosalía de Castro 9/11, 36350 Nigrán (Pontevedra)
<span class="telefono"></span>
986 365 414
<span class="email"></span>Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
<span class="web"></span>
www.plazafitness.es
</div>
En el fichero css que cargo en el fichero html, utilizo es siguiente código:
/* Fonts */
@font-face {
font-family:Entypo;
src: url("../fonts/Entypo.eot") /* EOT file for IE */
}
@font-face {
font-family: Entypo;
src: url("../fonts/Entypo.ttf") /* TTF file for CSS3 browsers */
}Esté código es el que utilizamos para poder cargar la fuente, que tenemos en un directorio llamado fonts.
Ahora os muestro el código que utilizo para div y span que utilizamos
span{
font-family: Entypo;
font-size: 26px;
font-weight: normal;
font-style: normal;
color:white;
margin: 0px 5px 0px 25px;
}
span.direccion:before {
content: '\2302';
}
span.telefono:before {
content: '\1F4DE';
}
span.email:before {
content: '\2709';
}
span.web:before {
content: '\1F30E';
}
" Creo que debo ponerme al día en html y css , ya que lo necesito "
La cuestión es que el código content lo encuentro en el siguiente link.
El problema surge que se ven bien los iconos de la casa y correo pero los del telefono no se ve bien en todos los navegadores y en todos sistemas operativos.
Como los diseñadores y los propietarios de las web no tienen la culpa de falta de conocimiento o de que no se respeten los navegadores no respeten los estandares, creo que tengo que buscar otra solución
Esté es el motivo de está entrada para poder publicar el problema y haber si hay alguien que me puede "echar un cabo".
Pruebo con otra fuente similar ICOMOON
Realizo los cambios necesarios en css y html , los cambios que yo creo que debería hacer... pero sigue sin funcionar, y lo más simpático es que los icono se muestran igualmente.
Ahora encuentro app de icomoon donde nos indica el código a utilizar, pero sigue igual .
Buceando un poco más en red, encuentro un proyecto icomoon en Github , donde podemos encontrar las fuentes en varios formatos.
En formatos svg, pdf,... para programas como Photoshop , ilustraitor... interesante!!!
"Tendré que informarme mejor como funciona para poder utilizar fuentes de iconos en las Web"
UTILIZAR FUENTE COMO SVG
Pensando soluciones, se me ocurre descargar los iconos en fichero svg, consigo los ficheros separado por cada fuente.
La subo a la carpeta imagenes con los nombre globe.svg y phone.svg, donde busca la forma maquetar html y css para poder mostrarlo.
El objetivo es que esté icono tome la medida de la fuente en cada resolución de cada pantalla.
Por lo que pone una medida la capa contendora no creo que sea lo apropiado...
Más lugares dodne busco información.
Sitio donde me explican bien como utilizar unicode
http://norfipc.com/inf/insertar-caracteres-especiales-simbolos-unicode.html
Link a página de pruebas de fuentes: