XF 2.2 Footer Link Icons

[btmgreg]

Hi there, Having a bit of trouble understanding the following - hoping someone can share a thought.

On the footer links to the left of my style (xenbase) - it looks like this.

When I check the code under the container template -

<footer class="p-footer" id="footer">
    <div class="p-footer-inner">

        <div class="p-footer-row">
            <xf:if contentcheck="true">
                <div class="p-footer-row-main">
                    <ul class="p-footer-linkList">
                    <xf:contentcheck>
                        <xf:if is="$xf.visitor.canChangeStyle()">
                            <li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
                                data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
                                <xf:fa icon="fa-paint-brush" /> {$xf.style.title}
                            </a></li>
                        </xf:if>
                        <xf:if is="$xf.visitor.canChangeLanguage()">
                            <li><a href="{{ link('misc/language') }}" data-xf-click="overlay"
                                data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow">
                                <xf:fa icon="fa-globe" /> {$xf.language.title}</a></li>
                        </xf:if>
                    </xf:contentcheck>
                    </ul>
                </div>
            </xf:if>
            <div class="p-footer-row-opposite">
                <ul class="p-footer-linkList">
                    <xf:if is="$xf.visitor.canUseContactForm()">
                        <xf:if is="$xf.contactUrl">
                            <li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
                        </xf:if>
                    </xf:if>

                    <xf:if is="$xf.tosUrl">
                        <li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.privacyPolicyUrl">
                        <li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.helpPageCount">
                        <li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.homePageUrl">
                        <li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
                    </xf:if>

                    <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><xf:fa icon="fa-rss" /><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
                </ul>
            </div>
        </div>

        <xf:if contentcheck="true">
            <div class="p-footer-copyright">
            <xf:contentcheck>
                <xf:copyright />
                {{ phrase('extra_copyright') }}
            </xf:contentcheck>
            </div>
        </xf:if>

        <xf:if contentcheck="true">
            <div class="p-footer-debug">
            <xf:contentcheck>
                <xf:macro template="debug_macros" name="debug"
                    arg-controller="{$controller}"
                    arg-action="{$actionMethod}"
                    arg-template="{$template}" />
            </xf:contentcheck>
            </div>
        </xf:if>
    </div>
</footer>

You can see that <xf:fa icon="fa-globe" /> is there for languages, along with the paintbrush for style. Why doesn't this show?

I'd personally like an icon for -

Style chooser, Change width, Toggle Sidebar and Language

Thank you!