css - fontawesome - fonticons

Los iconos de Font Awesome no funcionan en OSX Safari

Question

Mis íconos de font-awesome funcionan bien en Firefox y Chrome, pero en Safari solo veo espacio en blanco para algunos de ellos, pero no para otros. Captura de pantalla:

Como puede ver, los iconos para fa-twitter , fa-instagram y otros simplemente no se muestran, ya sea en el sitio web Font Awesome o cuando trato de usarlos con <i class="fa fa-instagram"></i> .

Realmente extraño, he limpiado mi memoria caché una docena de veces y no puedo entender qué más podría estar yendo mal aquí.

¿Algunas ideas?

Answer 1

¿Estás usando la última versión de Chrome? Ahora tienen una versión personalizada del kit web, una rama llamada Blink, por lo que aunque se muestren en Chrome, hoy en día, es posible que deba verificar en otro navegador del kit web para estar seguro.

Además, ¿qué el temido IE? ¿Se muestran allí?

Por lo general, tengo que ''Restablecer Safari'' en lugar de borrar el caché para borrar el caché.

Answer 2

¿Tiene un complemento de bloqueador de anuncios instalado en Safari?
Según la documentación de Font Awesome, los íconos de las redes sociales se pueden bloquear con dicho complemento.

Answer 3

Intenta borrar tu Caché, ya me ha sucedido esto una vez y fue corregido después de borrar mi caché (aunque estaba usando Chrome).

Answer 4

Puede haber otro problema en juego: estaba teniendo un problema similar en el que un conjunto de iconos generados de forma personalizada (con Font Custom) se mostraría en Chrome, Firefox y algunas versiones de Safari, pero no en ninguna versión de iOS. Me aseguré de que no tuviera bloqueadores de ventanas emergentes habilitados, pero todavía estaba experimentando el problema.

A través de un poco de investigación, descubrí que agregar esta propiedad al CSS de la fuente del icono solucionó el problema:

text-rendering: optimizeLegibility;

Después de agregar esta propiedad, la representación en todos los navegadores funcionó bien.

Answer 5

Definitivamente fue el Adblocker cuando deshabilité en un sitio que tenía un problema, lo arreglé

Answer 6

Esto sucedió en nuestro sitio incluso con un ícono que no es de marca, FontAwesome fa-share-square-o, / f045. Fue causado por un bloqueador de anuncios. Una vez que nuestro sitio fue incluido en la lista blanca, apareció el ícono.

Answer 7

Prueba esto. Esto funciona para mi.

@font-face {font-family: ''FontAwesome''; src: url(''../fonts/fontawesome-webfont.eot?v=4.4.0''); src: url(''../fonts/fontawesome-webfont.eot #iefix&v=4.4.0'') format(''embedded-opentype''), url(''../fonts/fontawesome webfont.woff2?v=4.4.0'') format(''woff2''), url(''../fonts/fontawesome webfont.woff?v=4.4.0'') format(''woff''), url(''../fonts/fontawesome webfont.ttf?v=4.4.0'') format(''truetype''), url(''../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular'') format(''svg''); font-weight: normal; font-style: normal;}