在Thymeleaf模板中使用flag-icon-css不显示国旗图标问题

1. 验证CDN样式文件是否成功加载 #

打开浏览器开发者工具（F12），切换到网络标签，刷新页面后搜索flag-icons.min.css：

• 如果请求状态不是200，说明CDN链接失效或网络受限，核对版本号后替换为有效链接（当前6.7.0版本的正确CDN链接为https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/css/flag-icons.min.css）。
• 如果请求成功，继续下一步排查。

2. 检查HTML元素渲染与类名正确性 #

查看页面渲染后的实际HTML（开发者工具元素标签）：

• 确认<span>标签的class属性完整保留为flag-icon flag-icon-gb这类格式，Thymeleaf未对class属性进行错误转义。
• 确保国家代码类名拼写正确：英国是flag-icon-gb、西班牙是flag-icon-es、法国是flag-icon-fr、葡萄牙是flag-icon-pt，避免拼写错误（比如把gb写成uk）。

3. 确保元素有足够显示尺寸 #

flag-icon默认是inline-block元素，若未设置尺寸可能导致图标不可见：

• 直接使用官方提供的尺寸类，修改代码示例：

<span class="flag-icon flag-icon-gb flag-icon-lg"></span>
<span class="flag-icon flag-icon-es flag-icon-lg"></span>

• 或自定义CSS设置宽高：

.flag-icon {
  width: 24px;
  height: 16px;
}

4. 排查样式冲突问题 #

在开发者工具中选中国旗<span>元素，查看样式标签：

• 检查background-image属性是否存在且指向正确的SVG路径（比如英国国旗的路径应为https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags/4x3/gb.svg），若被其他CSS覆盖，可添加!important强制生效：

.flag-icon-gb {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags/4x3/gb.svg") !important;
}

• 检查是否有display: none、opacity: 0等隐藏元素的样式被应用，如有则移除或覆盖。

5. Thymeleaf模板特殊情况排查 #

若模板中使用Thymeleaf属性绑定（如th:class），需确保语法正确：

<span th:class="flag-icon flag-icon-gb"></span>

避免因表达式错误导致类名未正确渲染。

内容的提问来源于stack exchange，提问作者Nunyet Calçada