Footer Link Icons

[gregbtm]

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? It doesn't appear to show on the demo of xenbase, either.

I'd personally like an icon for -

Style chooser, Change width, Toggle Sidebar and Language

If it's something I'm doing wrong - please give us a tip guys! Thank you. I also plan on not displaying this on mobile devices after, but I do have the CSS for that already (thanks to @Russ !)

 

[Russ]

So we removed these icons intentionally. With our options toggle width, toggle sidebar, it felt weird to have icons on all the links as it looked overwhelming.

This in extra.less should add them back easily. This is specific to our styles.

.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }

For your instance, if you want mobile only you can use this:

@media (min-width: (@xf-responsiveMedium  + 1)) {
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }
}

These icons were removed back in 2020 I believe.

 

[gregbtm]

Thanks Russ. Always our hero. I hope you're well.