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