React项目中MDB Bootstrap图标无法显示如何解决

问题现象：基于React + MDB React UI Kit开发登录页，使用MDBIcon渲染Google、Twitter、Facebook等第三方品牌图标时，仅能显示对应品牌色按钮，按钮内部图标无法加载，组件代码参照官方示例编写无明显语法错误。

问题根因 #

你的组件代码写法本身没有错误，图标无法渲染是因为缺少MDB Icon依赖的字体样式资源：mdb-react-ui-kit的MDBIcon组件不会自动内置图标字体文件，品牌类（带fab属性的第三方平台图标）需要单独引入对应的Font Awesome样式才能正常显示。

修复操作步骤 #

• 安装图标依赖包
  在项目根目录的终端执行以下命令，安装MDB Icon依赖的免费字体资源：

  npm install @fortawesome/fontawesome-free
  

• 全局引入图标样式
  打开项目的React入口文件（通常是src/index.js或src/main.jsx，也就是你挂载React根节点的文件），在文件最顶部添加样式引入代码：

  import '@fortawesome/fontawesome-free/css/all.min.css';
  

  注意：不要把这段引入写在单个业务组件里，必须放在入口文件全局引入，否则构建工具可能无法正确解析字体文件的引用路径。
• 重启开发服务验证
  终止当前运行的npm start进程，重新执行命令启动开发服务，打开Chrome后按Ctrl+Shift+R硬刷新页面清除缓存，就能看到按钮内的品牌图标正常渲染了。

异常排查 #

如果完成以上操作后图标还是不显示，打开Chrome开发者工具切换到Console面板，检查是否有字体资源加载的404报错：

• 如果存在路径报错，删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再试
• 如果没有报错但图标位置是空白方块，检查你写的MDBIcon属性是否正确，google、twitter、facebook这些品牌图标必须加fab属性才能匹配到对应的字体集。

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