Express中用Jade渲染带Font Awesome图标的动态列表图标不显示如何解决

问题根因 #

图标显示空白方框是Font Awesome版本与使用的类名不匹配导致的，具体问题如下：

• 你引入的是Font Awesome 4.4.0版本，该版本没有fas/far这类样式前缀，所有图标统一使用fa作为前缀
• fa-file-alt、fa-folder-open是Font Awesome 5及之后版本才有的图标命名，4.4.0版本不存在对应的图标资源
• 你使用的是http协议的CDN链接，如果你的站点是https访问，浏览器会触发混合内容拦截，阻止CSS资源加载，也会导致图标显示异常。

修复方案 #

提供两种可选方案，任选其一即可：

方案1：保留现有4.4.0版本，修改图标类名 #

修改index.jade中的状态判断逻辑，替换为4.x版本支持的类名：

// 如果需要空心图标用这个写法
- const status = ticket.status === 'file' ? 'fa fa-file-text-o' : 'fa fa-folder-open-o'
// 如果需要实心图标去掉后缀的-o即可：'fa fa-file-text' 和 'fa fa-folder-open'
i(class=status)

同时建议把layout.jade中的CDN链接改为https协议，避免混合内容拦截：

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')

方案2：升级Font Awesome版本，保留现有类名逻辑 #

把layout.jade中的旧版CDN替换为高版本Font Awesome免费CDN，原有的fas/far类名和图标命名无需修改即可生效：

link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css')

修改完成后如果仍有异常，可以打开浏览器开发者工具的「网络」面板，检查Font Awesome CSS资源是否加载成功，排除404、跨域等问题。

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