要解决Angular 7 PWA在离线模式下缺少Font Awesome图标的问题，您可以采取以下步骤：

1. 首先，确保您已经安装了Font Awesome并将其添加到您的Angular项目中。您可以使用以下命令安装Font Awesome：

   npm install @fortawesome/fontawesome-free
   

2. 在您的angular.json文件中，找到styles数组并添加Font Awesome的CSS引用。您可以按照以下示例将路径添加到您的angular.json文件中：

   "styles": [
     "src/styles.css",
     "node_modules/@fortawesome/fontawesome-free/css/all.css"
   ],
   

3. 在您的angular.json文件中，找到assets数组并添加Font Awesome的字体文件路径。您可以按照以下示例将路径添加到您的angular.json文件中：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     {
       "glob": "**/*",
       "input": "node_modules/@fortawesome/fontawesome-free/webfonts",
       "output": "/webfonts/"
     }
   ],
   

4. 在您的ngsw-config.json文件中，找到"dataGroups"部分，并添加以下代码来缓存Font Awesome的字体文件：

   "dataGroups": [
     {
       "name": "font-awesome",
       "urls": [
         "https://use.fontawesome.com/releases/v5.15.3/css/all.css",
         "https://use.fontawesome.com/releases/v5.15.3/webfonts/*"
       ],
       "cacheConfig": {
         "maxSize": 100,
         "maxAge": "1d",
         "timeout": "5s",
         "strategy": "freshness"
       }
     }
   ],
   

   这将确保在离线模式下，Font Awesome的字体文件也会被缓存。

5. 最后，在您的模板文件中，确保您正确地使用了Font Awesome图标。例如，要使用一个名为"fa-home"的Font Awesome图标，您可以在模板中使用以下代码：

   通过使用正确的Font Awesome类名，您应该能够在离线模式下正确显示图标。

请注意，这只是解决Angular 7 PWA中缺少Font Awesome图标的一种方法，具体取决于您的项目配置和需求。您可以根据需要进行适当的调整。