使用CSS类添加上标字体图标

我有下面的HTML片段

<ul>
    <li class="fa fa-balance-scale" id="test" />
</ul>

…和一些JS，以增加大小并在事件后附加沙漏：

$("#test").addClass("fa-hourglass-half fa-lg")

…我希望创建以下（图像）：

---

我使用以下方法管理它

<i class="fa" icon-before="&#xf24e" icon-after="&#xf252"></i>

i:before {
    /*balance-scale*/
    content: attr(icon-before);
    position: relative;
    font-size: 1.5em;
    margin: 0.1em;
}

i:after {
    /*fa-hourglass-half*/
    content: attr(icon-after);
    position: absolute;
    font-size: -0.5em;
    /*margin-bottom: 2.0em;*/
}

---

如果你要求一个官方的“字体很棒”的方式，我不知道-但这里的逻辑背后，我会尝试这样做

首先，我将创建一个JSFIDLE，并确保字体和其他依赖项都已加载/因此我们都在同一页面上：-看起来像这样的链接：包括@font包含项和css

然后我将创建一些功能来检查：

<ul class='icon-list'>
  <li class='icon fa fa-camera-retro' id='test'></li>
</ul>

<button rel='toggle'>toggle superscript</button>

然后放在上面-在上角/这个字体特别棒吗？/有沙漏式的“平衡秤”吗？我不知道。我无法使fa平衡秤工作

.icon-list {
  padding: 1rem;
}

.fa.waiting {
  position: relative;
}

.fa.waiting:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: 'x'; /* whatevers */
  color: red;
  transform: translate(50%, -50%);
}

---

此逻辑适用于任何类型的图形包含。图标字体是最好的选择，但现在已经不是这样了。看一看fontastic或会吐出雪碧纸的东西。：）

你加载字体库了吗？它似乎在FF中工作“虽然我使用以下方法来管理它……但这并不合适，因为我只需要使用CSS类”为什么不使用2个标记及其各自的类来加载所需的字体？您可以在不需要更新的情况下对其进行样式设置：在内容之前。而规则已经存在于字体可怕的css文件中。负号字体不存在（顺便说一句；）我改为使用svg精灵，但我认为使用（尽管是一种攻击）在语义上更为正确。还有<代码>

不是自动关闭的。感谢您的帮助。虽然这不是我想要的，但你的回答对我帮助很大，为我指明了正确的方向。

<ul class='icon-list'>
  <li class='icon fa fa-camera-retro' id='test'></li>
</ul>

<button rel='toggle'>toggle superscript</button>

var $button = $('[rel="toggle"]');

$button.on('click', function() {
    $('#test').toggleClass('waiting');
});

.icon-list {
  padding: 1rem;
}

.fa.waiting {
  position: relative;
}

.fa.waiting:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: 'x'; /* whatevers */
  color: red;
  transform: translate(50%, -50%);
}