多语言网站span标签及Font Awesome图标显示问题求助

问题1：内嵌span标签的多语言内容不加载 #

你的HTML结构没问题，但多语言切换的JS逻辑大概率只处理了父元素（h1），没遍历到嵌套的子元素（span）。修改JS代码，让它选中所有带有jezik属性的元素即可：

// 多语言切换函数示例
function switchLanguage(lang) {
  // 选中页面所有带jezik属性的元素
  const elements = document.querySelectorAll('[jezik]');
  // 遍历替换每个元素的文本内容
  elements.forEach(el => {
    const key = el.getAttribute('jezik');
    el.textContent = lang[key]; // lang为加载后的JSON对象
  });
}

JSON配置保持你原来的写法即可：

// en.json
{
  "heading": "My ",
  "heading-span": "Services"
}

// rs.json
{
  "heading": "Moje ",
  "heading-span": "Usluge"
}

这种方式只会替换元素的文本内容，span的原有颜色样式会完整保留。

问题2：Font Awesome图标不显示 #

按以下方向排查解决：

• 检查资源引入：确保已正确引入Font Awesome的CSS文件（或JS文件，若使用SVG图标）。比如最新版CDN引入需放在<head>中：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• 核对标签写法：确认图标类名符合当前版本规范，新版需加fa-solid/fa-regular前缀：

  <!-- 正确写法 -->
  <i class="fa-solid fa-house"></i>
  <!-- 错误写法（旧版前缀） -->
  <i class="fa fa-house"></i>
  

• 排查样式冲突：检查自定义CSS是否覆盖了Font Awesome的默认样式，比如是否设置了display: none、opacity: 0或异常尺寸导致图标不可见。

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