求助：基于OpenWeatherMap的Weather Icons图标CDN引入后无法显示

我来帮你排查下这个问题，大概率是几个常见的配置疏漏导致的：

• 首先，确保引入了完整的Weather Icons CSS文件
  你目前只引入了wind扩展的CSS，但核心的基础样式和图标定义在主文件里。需要同时引入主CSS和wind CSS，比如：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
  

  缺少主文件的话，wi-wom-xxx类没有基础样式支撑，自然显示不出来。

• 检查类名的正确写法
  使用Weather Icons的时候，必须同时添加基础类wi和对应的图标类，比如：

  <i class="wi wi-wom-200"></i>
  

  只写wi-wom-200是不行的，因为wi类包含了图标字体的核心样式（比如字体族、大小等）。

• 验证天气代码的映射准确性
  确认OpenWeatherMap返回的天气代码和Weather Icons的wi-wom-xxx类完全匹配。比如200对应的是雷暴伴小雨，你可以对照官方的API列表确认代码对应关系，避免把返回的主代码和子代码搞混（比如OpenWeatherMap有时候会返回带后缀的代码，你需要取主代码部分来匹配）。

• 检查CDN链接的有效性
  虽然你用的2.0.9版本是稳定版，但可以临时换个版本试试，或者直接访问CDN链接确认文件是否能正常加载。如果链接失效，图标字体无法下载，自然也显示不出来。

按照这几步排查下来，应该就能解决图标不显示的问题了。

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