3

Tengo una página web que utiliza iconos de font-awesome, en el navegador de una pc funciona bien, pero al momento de ver el resultado en un dispositivo móvil los iconos no se muestran, en el caso de font-awesome solo deja el espacio y utilizando iconos de material-design me muestra el texto que hay en la etiqueta i.

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Ejemplo</title>
        <link href="http://www.pilgrims.com.mx/pilgrimsweb/rec/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    </head>

    <body>
        <i class="material-icons">face</i>
        <i class="material-icons">home</i>
        <i class="material-icons">chevron_left</i>
        <i class="material-icons">chevron_right</i>
        <i class="material-icons">person</i>
        <i class="material-icons">visibility</i>
    </body>
</html>

Como debería de verse / Como se ve en un dispositivo móvil real introducir la descripción de la imagen aquí

2
  • 1
    Solo por si acaso.... El dispositivo real tiene acceso a internet? ya que estás descargando eso de internet: fonts.googleapis.com/icon?family=Material+Icons no de archivos locales.
    – zerocool
    el 15 abr. 2019 a las 17:54
  • si, la página está en un servidor con acceso a internet
    – Aleex
    el 15 abr. 2019 a las 19:22

2 respuestas 2

2

Parece que el dispositivo móvil no tiene acceso a internet, tendrás que descargar manualmente los archivos fuentes de https://fonts.googleapis.com/icon?family=Material+Icons y https://use.fontawesome.com/releases/v5.8.1/css/all.css, los pones en una carpeta llamada CSS por ejemplo. Luego eliminas los links a estas rutas (que requieren internet para traerlas), y añades los links a los archivos que descargaste. Ejemplo:

<link href="http:tudominio.com/css/iconos-google.css" rel="stylesheet">

Nota: Las fuentes de google hacen una petición dentro del CSS a esta dirección fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2, deberías descargar este archivo también y reemplazar la ruta en el css que descargues de Google.

1

El problema está en que ese móvil en concreto usa un navegador antiguo. Para solucionarlo, bastaría con añadir el código de carácter tal que así:

<i class="material-icons face">&#xe87c;</i>

De todas formas, puedes usar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.