使用data-i18n实现按钮国际化时，加号图标无法显示的问题

看起来你的问题大概率出在多语言插件的内容覆盖逻辑或者Font Awesome版本/类名匹配上，我来一步步帮你排查和修复：

一、核心问题：多语言插件覆盖了图标元素 #

你的原代码把data-i18n="text"直接绑定在按钮<a>标签上，大多数多语言插件（比如jquery-i18n、i18next）在处理data-i18n属性时，会替换整个元素的innerHTML内容——这就意味着你用prepend()添加的加号图标<span class="fa fa-plus"></span>会被翻译文本完全覆盖，自然看不到图标。

修复方案：分离图标和翻译文本 #

把翻译目标放在单独的子元素里，让图标和多语言文本互不干扰：

// 先创建按钮容器
var $button = $('<a class="btn" href="#"></a>')
  // 添加加号图标（加空格分隔图标和文本）
  .prepend('<span class="fa fa-plus"></span> ')
  // 单独创建用于多语言翻译的文本元素
  .append('<span data-i18n="text"></span>')
  // 初始化tooltip
  .tooltip({ title: 'change item' });

// 记得触发多语言插件的翻译更新（以jquery-i18n为例）
// $button.find('[data-i18n]').i18n();

这样处理后，多语言插件只会替换<span data-i18n="text">的内容，不会影响前面的图标元素。

二、另一个常见坑：Font Awesome版本不匹配 #

如果代码结构没问题但还是看不到图标，大概率是Font Awesome的类名不对：

• 若使用Font Awesome 4.x，类名fa fa-plus是正确的
• 若使用Font Awesome 5+，需要用fas fa-plus（实心样式）或far fa-plus（空心样式），旧的fa类名已被废弃

同时要确保Font Awesome的CSS文件已正确引入页面，没有加载失败。

三、对你第二种写法的优化建议 #

你提到的第二种写法里用了.text('sample text')，这个方法会清空按钮内所有现有内容再添加文本，建议同样把翻译文本放在单独子元素里，避免内容冲突：

var $button = $('<a class="btn"></a>')
  .prepend('<span class="fa fa-plus"></span> ')
  .append('<span data-i18n="text">sample text</span>')
  .tooltip({ title: 'change item' });

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