Rewriting glyphicon code for Font Awesome

Question

I'm currently using the following code to display a couple glyphicons (glyphicon-chevron-down and glyphicon-remove-sign) with my headers:

<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>

I just discovered Font Awesome's latest library and want to try it out. How should I modify the code above to replace glyphicon-chevron-down with this?

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

P.S. I should add that I'd like to simplify my code, if possible. Four separate spans is too much. ;)

Answer 1

replace

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

by

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

no more :P

You should end up with something like this :

<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>