材质图标在 <span> 内消失答案

【问题标题】：Material icon disappears inside <span>材质图标在 <span> 内消失
【发布时间】：2022-01-10 05:55:55
【问题描述】：

我想在一大段文字旁边显示一个图标，但该图标似乎在我身上消失了。这就是我所拥有的：

      <div class="d-flex align-items-center mt-1" >
        <span class="ml-3">
          My text, blah blah blah <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

图标不显示。当我去检查页面时，它甚至不在源 HTML 中。当我这样做时：

  <div class="d-flex align-items-center mt-1" >
    <span class="ml-3">
      My text, blah blah blah
    </span> 
    <i class="material-icons text-info cursor-help">info_outline</i>
  </div>

然后将图标从跨度中取出，它确实会显示出来，但是它位于错误的位置。

我很想知道为什么图标一开始没有出现。如果我需要提供更多信息，请告诉我。谢谢！

【问题讨论】：

您的代码似乎正确。它应该工作。我无法重现错误

标签： html angular angular-material angular-ui-bootstrap

【解决方案1】：

所以我能够解决这个问题并发布解决方案，以防它帮助任何人。

在我最初的问题中，我忽略了span 中有一个 i18n 标记，因为我只想在我的问题中包含标记的“相关”部分。它看起来像这样：

  <div class="d-flex align-items-center mt-1" >
        <span class="ml-3" @@i18n="myTranslation">
          My text, blah blah blah <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

它没有显示图标，因为图标不是翻译的一部分！这是解决方案：

  <div class="d-flex align-items-center mt-1" >
        <span class="ml-3">
          <span @@i18n="myTranslation"> My text, blah blah blah </span> <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

希望对某人有所帮助！

【讨论】：