使用 ember font-awesome 时如何操作图层文本？答案

【问题标题】：How do I manipulate layer text when using ember font-awesome?使用 ember font-awesome 时如何操作图层文本？
【发布时间】：2020-01-16 06:49:31
【问题描述】：

我正在使用official ember font-awesome library，我正在尝试使用以下代码向图标添加一些文本：

  <span class="fa-layers fa-lg">
    <FaIcon @icon="circle" @size="3x" />
    <span class="fa-layers-text  fa-inverse" data-fa-transform="shrink-8">
      27
    </span>
  </span>

从我在documentation examples 上看到的应该可以工作，但data-fa-transform 属性中的值不会产生任何变化。

由于 FA 现在使用 SVG，我需要使用其他方法吗？

【问题讨论】：

标签： ember.js font-awesome

【解决方案1】：

Ember Fontawesome 仅处理将 <FaIcon> 组件转换为 SVG 图标。您的示例不起作用的原因是 fontawesome 没有对 <span> 标记做任何事情。你需要告诉 fontawesome 这个元素以获得你正在寻找的行为。

为此，您需要使用 fontawesome 中的 dom-i2svg 方法并使用 @ember/render-modifiers 传递您的元素。

// app/components/layer-icon.js
import Component from '@glimmer/component';
import { dom } from '@fortawesome/fontawesome-svg-core';
import { next } from '@ember/runloop';

export default class LayerIconComponent extends Component {
  scanDom(element) {
    next(() => {
      dom.i2svg({node: element});
    });
  }
}

//app/components/layer-icon.hbs
<span class="fa-layers fa-lg" {{did-insert this.scanDom}}>
  <FaIcon @icon="circle" @size="3x" />
  <span class="fa-layers-text  fa-inverse" data-fa-transform="shrink-8">
    27
  </span>
</span>

【讨论】：

我怀疑是这种情况，但不知道从哪里开始修复它。以上是一种享受！