HTML登录页Font Awesome眼睛图标不显示，请问代码哪里存在问题？

• 未引入Font Awesome图标库资源
  fa fa-eye是Font Awesome图标库提供的专属类名，不属于原生HTML/CSS的默认能力，没有在页面中引入对应版本的Font Awesome样式文件时，浏览器无法解析该类对应的图标资源，就无法正常渲染。
• 类名与库版本不匹配
  如果你引入的是Font Awesome 5及以上版本，实心眼睛图标的类名已调整为fas fa-eye，fa前缀仅在Font Awesome 4及更早版本中生效，版本和类名不匹配就会出现空白占位。
• 自定义样式冲突
  你编写的其他CSS规则可能覆盖了图标元素的属性：比如给<i id="eye">或者它的父级<span>设置了display: none、visibility: hidden，或者图标颜色和页面背景色完全一致、字体大小设置为0，都会导致图标看起来没有渲染。
• 本地资源路径错误
  如果你是将Font Awesome资源下载到本地进行引入，填写的CSS文件路径有误导致资源加载失败，也会造成图标无法显示。

修复参考 #

1. 在页面<head>标签中引入对应版本的Font Awesome样式文件
2. 匹配类名与库版本：使用5/6版本就将类名修改为fas fa-eye，使用4版本保持fa fa-eye即可
3. 打开浏览器开发者工具，选中<i id="eye">元素查看生效的CSS规则，排查是否存在样式冲突，调整对应自定义样式即可

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