使用CSS类

Question

我有以下HTML代码段。

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

..与相关的CSS类：

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-balance-scale:before {
    /* font-awesome: balance-scale */
    content: "\f24e"
}

.fa-hourglass-2:before,
.fa-hourglass-half::before {
    /* font awesome: balance-scale, fa-hourglass-half */
    content: "\f24e \f252";
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

..和一些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;*/
}

...它不合适，因为我只需要使用CSS类。这是由于我正在处理的应用程序的其他组件的依赖性（并确保兼容性）。

是否有人可以仅使用CSS类提出可能的解决方案？任何建议或意见也将不胜感激。谢谢。

感谢所有人，特别是sheriffderek，这是使用的代码：

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa.loading {
    position: relative;
}

.fa.loading:after {
    display: block;
    position: absolute;
    top: -8px;
    right: -12px;
    content: '\f252';
    transform: scale(0.7, 0.7);
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

Answer 1

如果你要求官方的“字体真棒”方式，我不知道 - 但这是我尝试做的背后的逻辑。

首先我要创建一个jsFiddle - 并确保加载字体和其他依赖项/所以我们都在同一页面上：http://jsfiddle.net/sheriffderek/rqLkjmo3/2/ ---它看起来像这个链接：{{3}包括@font包含和css。

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

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

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

在这种情况下的jQuery：

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

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

然后躺在上面的东西 - 在这个字体真棒特定？ /是否有沙漏版的“平衡规模”？我不知道。我无法让.fa-balance-scale工作......

.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或会吐出精灵表的东西。 ：）