如何解决MDB Bootstrap注册模板表单图标无法渲染问题

代码里fas fa-xxx格式的类名对应的不是普通<img>标签加载的位图，是CSS驱动的图标字体，这套类名规则属于Font Awesome图标库。当前代码仅引入了原生Bootstrap的CSS文件，缺少两类必要依赖，直接导致图标渲染失败：

• Font Awesome图标库自身的样式文件与配套字体文件
• 该注册模板属于MDBootstrap的定制模板，代码中form-outline浮动输入框是MDB的私有组件，原生Bootstrap不存在这个类，不引入MDB资源的话，除了图标缺失，输入框的标签浮动效果也会完全失效。

按以下步骤配置即可：

1. 提前把所需资源下载到本地项目的静态资源目录，不要依赖外部公共资源避免加载失败：
   • 下载对应版本的Font Awesome免费版图标包，解压后存入项目静态资源目录
   • 下载对应版本的MDBootstrap标准包，同样存入项目静态资源目录
2. 在页面的<head>区域，保留已有的Bootstrap CSS引入语句，在其后方按顺序引入本地CSS文件：

<!-- 原有Bootstrap CSS引入代码保留不动 -->
<!-- 引入本地存储的Font Awesome样式文件 -->
<link rel="stylesheet" href="/your-project-static-path/fontawesome/css/all.min.css">
<!-- 引入本地存储的MDB核心样式文件 -->
<link rel="stylesheet" href="/your-project-static-path/mdb/css/mdb.min.css">

3. 在页面</body>闭合标签前，引入MDB核心JS文件，用于初始化表单类交互组件：

<script src="/your-project-static-path/mdb/js/mdb.umd.min.js"></script>

4. 版本校验：如果使用Font Awesome 5及以上免费版本，fas前缀默认对应实心风格图标，代码中写的fa-user、fa-envelope、fa-lock、fa-key均包含在免费实心图标包内，无需修改类名；如果使用更低版本，核对下载的图标包包含上述几个图标即可。

配置完成后刷新页面，表单图标即可正常渲染，输入框的浮动标签效果也会同步恢复。

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