为 Font Awesome 重写 glyphicon 代码答案

【问题标题】：Rewriting glyphicon code for Font Awesome为 Font Awesome 重写 glyphicon 代码
【发布时间】：2016-02-16 01:21:34
【问题描述】：

我目前正在使用以下代码在我的标题中显示几个字形图标（glyphicon-chevron-down 和 glyphicon-remove-sign）：

<h2 class="h2Article collapsed" id="a4" data-toggle="collapse" data-target="#b4" aria-expanded="false"><span class="Article"><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Acquired LifeTags</span></span></h2>

我刚刚发现了 Font Awesome 的最新库，并想尝试一下。我应该如何修改上面的代码来用这个替换 glyphicon-chevron-down？

<i class="fa fa-chevron-down fa-2x"></i>

附：我应该补充一点，如果可能的话，我想简化我的代码。四个单独的跨度太多了。 ;)

【问题讨论】：

P.S.将 Font Awesome 的字符称为 glyphicons 是否正确，或者 glyphicons 和 Font Awesome 是两个不同的东西？
fortawesome.github.io/Font-Awesome vs glyphicons.com ;两种不同的东西

标签： twitter-bootstrap fontawesome-4.4.0

【解决方案1】：

替换

<span class="only-collapsed glyphicon glyphicon-chevron-down"></span>

由

<i class="only-collapsed fa fa-chevron-down fa-2x"></i>

没有了：P

你应该得到这样的结果：

<h2 class="h2Article collapsed Article label label-primary" id="a4"
     data-toggle="collapse" data-target="#b4" aria-expanded="false">
    <small>
        <i class="only-collapsed fa fa-chevron-down fa-2x"></i>
        <i class="only-expanded glyphicon glyphicon-remove-sign"></i>
    </small>
    &nbsp;Acquired LifeTags
</h2>

【讨论】：