El icono Unicode de Font Awesome no funciona en Firefox

Solución:

Desafortunadamente, este es un problema antiguo con varios navegadores, especialmente Firefox en Mac OS X. Hay un truco en el que agrega un atributo “múltiple” a la etiqueta de selección, pero esto alterará la naturaleza de su cuadro desplegable y puede resultar en aportes de los usuarios.

 <select multiple class="form-control phone_verified">
  <option value="">Select Option</option>
  <option value="1">Yes (&#xf00c;)</option>
  <option value="0">No (&#xf00d;)</option>
  </select>

Solución de trabajo en Fiddle

Problema en Github

Tengo una solución alternativa, una solución y un razonamiento de por qué está sucediendo esto …

Solución alternativa: simplemente use cualquier estilo `fa en su página.

Ejemplo:

https://jsfiddle.net/mbaas/zLapqy3u/

Solución: declare font-face

Añade el font-face-declaración del CSS de FA:

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

Tenga en cuenta que este código se refiere a algunos archivos de fuentes que también deberá proporcionar.

En realidad … recomendaría no llamar a esta fuente FontAwesome, porque eso podría superponerse con FA y causar efectos secundarios no deseados. Mejor use un nombre único. Para ser claro:

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

y

select {
font-family: 'FontAwesome_Dilip', 'open sans'
}

También quiero sugerir el uso de un estilo específico para esta familia de fuentes en lugar de aplicarlo a todos. select-control S.

Explicación posible

Podría ser algún tipo de optimización donde FF no se molesta en procesar el @font-face-declation de FA-CSS, porque no se utiliza (no se hace referencia a ninguno de los estilos reales de CSS). Entonces mi simple <i class="fa fa-check"></i> arreglado…

Bono: otra ventaja del tipo de letra “privado”

Siempre y cuando solo uses yes o no en el selecto, todo está bien. Intenta agregar la palabra Keya sus opciones solo para ver qué es posible (este es un efecto que generalmente no era reproducible, pero al usar Chrome tuve este mismo problema. Pero también estoy usando FontAwesome-Font en mi sistema Windows y sospecho que esto causó el efecto).: puede terminar viendo el smybol dos veces, porque “clave” se usa como ligadura en la definición de fuente para generar el mismo símbolo. Entonces, la ventaja de declarar un tipo de letra específicamente para ese uso es que puede agregar font-variant-ligatures: none; al estilo CSS para select para deshabilitar ligaduras.

Lo que está buscando es la inclusión de -webkit o -moz en su documento css. Chrome lo admite, pero para que mozilla lo admita, use “-moz-“.

Para obtener más información al respecto, vaya al enlace de abajo y encontrará todo lo relacionado con él. https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

---

---

Utiliza Nuestro Buscador