使用fa-solid fa-house时Font Awesome 5房屋图标无法显示的问题

问题根因 #

你使用的fa-house图标是Font Awesome 6新增的图标，在Font Awesome 5的图标库中并不存在。同时Font Awesome 5中Solid样式的前缀为fas（而非Font Awesome 6的fa-solid），这两个因素共同导致图标无法正常渲染。

两种解决办法 #

方法1：升级到Font Awesome 6（已验证可行） #

替换原有Font Awesome 5的CDN链接为Font Awesome 6的资源，保持fa-solid fa-house的类名即可正常显示：

<!DOCTYPE html>
<html>
<head>
    <title>Font Awesome Example</title>
    <!-- Font Awesome 6 CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <h1>Font Awesome Example</h1>
    <i class="fa-solid fa-house"></i>       
</body>
</html>

方法2：改用Font Awesome 5兼容的图标 #

如果不想升级版本，可使用Font Awesome 5中对应的房屋图标fa-home，搭配5.x版本的类前缀：

<!DOCTYPE html>
<html>
<head>
    <title>Font Awesome Example</title>
    <!-- 保留原Font Awesome 5 CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>
<body>
    <h1>Font Awesome Example</h1>
    <!-- 使用Font Awesome 5的图标类 -->
    <i class="fas fa-home"></i>       
</body>
</html>

内容的提问来源于stack exchange，提问作者AnkurS