FontAwesome Icons in Visitor Tab & Account Wrapper

FontAwesome Icons in Visitor Tab & Account Wrapper

Sure, this is the applicable code to go into the navigation_visitor_tab template. Just find where this <div> is in the template and replace it:

Code:
            <div class="menuColumns secondaryContent">
                <ul class="col1 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links1">
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}"><i class="fa fa-user fa-lg fa-fw" ></i>{xen:phrase personal_details}</a></li></xen:if>
                    <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}"><i class="fa fa-pencil fa-lg fa-fw" ></i>{xen:phrase signature}</a></li></xen:if>
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/contact-details}"><i class="fa fa-book fa-lg fa-fw" ></i>{xen:phrase contact_details}</a></li></xen:if>
                    <li><a href="{xen:link account/privacy}"><i class="fa fa-lock fa-lg fa-fw" ></i>{xen:phrase privacy}</a></li>
                    <li><a href="{xen:link account/preferences}" class="OverlayTrigger"><i class="fa fa-cog fa-lg fa-fw" ></i>{xen:phrase preferences}</a></li>
                    <li><a href="{xen:link account/alert-preferences}"><i class="fa fa-wrench fa-lg fa-fw" ></i>{xen:phrase alert_preferences}</a></li>
                    <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true"><i class="fa fa-camera-retro fa-lg fa-fw" ></i>{xen:phrase avatar}</a></li></xen:if>
           <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a href="{xen:link account/external-accounts}"><i class="fa fa-link fa-lg fa-fw" ></i>{xen:phrase external_accounts}</a></li></xen:if>
                    <li><a href="{xen:link account/security}"><i class="fa fa-key fa-lg fa-fw" ></i>{xen:phrase password}</a></li>
                </xen:hook>
                </ul>
                <ul class="col2 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links2">
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}"><i class="fa fa-rss fa-lg fa-fw" ></i>{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a href="{xen:link conversations}"><i class="fa fa-inbox fa-lg fa-fw" ></i>{xen:phrase conversations}
                        <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_ConversationsCounter">
                            <span class="Total">{xen:number $visitor.conversations_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/alerts}"><i class="fa fa-bolt fa-lg fa-fw" ></i>{xen:phrase alerts}
                        <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_AlertsCounter">
                            <span class="Total">{xen:number $visitor.alerts_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/likes}"><i class="fa fa-thumbs-up fa-lg fa-fw" ></i>{xen:phrase likes_youve_received}</a></li>
                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}"><i class="fa fa-comments fa-lg fa-fw" ></i>{xen:phrase your_content}</a></li>
                    <li><a href="{xen:link account/following}"><i class="fa fa-group fa-lg fa-fw" ></i>{xen:phrase people_you_follow}</a></li>
                    <li><a href="{xen:link account/ignored}"><i class="fa fa-minus-circle fa-lg fa-fw"></i>{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}"><i class="fa fa-usd fa-lg fa-fw" ></i>{xen:phrase account_upgrades}</a></li></xen:if>
                </xen:hook>
                </ul>
            </div>


FYI, and for my information as well, here's an updated version of my code for xf 1.5 (adds a nice shield FA icon for two-factor authentication :)

Code:
<div class="menuColumns secondaryContent">
                <ul class="col1 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links1">
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}"><i class="fa fa-user fa-lg fa-fw" ></i>{xen:phrase personal_details}</a></li></xen:if>
                    <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}"><i class="fa fa-pencil fa-lg fa-fw" ></i>{xen:phrase signature}</a></li></xen:if>
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/contact-details}"><i class="fa fa-book fa-lg fa-fw" ></i>{xen:phrase contact_details}</a></li></xen:if>
                    <li><a href="{xen:link account/privacy}"><i class="fa fa-lock fa-lg fa-fw" ></i>{xen:phrase privacy}</a></li>
                    <li><a href="{xen:link account/preferences}" class="OverlayTrigger"><i class="fa fa-cog fa-lg fa-fw" ></i>{xen:phrase preferences}</a></li>
                    <li><a href="{xen:link account/alert-preferences}"><i class="fa fa-wrench fa-lg fa-fw" ></i>{xen:phrase alert_preferences}</a></li>
                    <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true"><i class="fa fa-camera-retro fa-lg fa-fw" ></i>{xen:phrase avatar}</a></li></xen:if>
           <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a href="{xen:link account/external-accounts}"><i class="fa fa-link fa-lg fa-fw" ></i>{xen:phrase external_accounts}</a></li></xen:if>
                    <li><a href="{xen:link account/security}"><i class="fa fa-key fa-lg fa-fw" ></i>{xen:phrase password}</a></li>
                </xen:hook>
                </ul>
                <ul class="col2 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links2">
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}"><i class="fa fa-rss fa-lg fa-fw" ></i>{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a href="{xen:link conversations}"><i class="fa fa-inbox fa-lg fa-fw" ></i>{xen:phrase conversations}
                        <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_ConversationsCounter">
                            <span class="Total">{xen:number $visitor.conversations_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/alerts}"><i class="fa fa-bolt fa-lg fa-fw" ></i>{xen:phrase alerts}
                        <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_AlertsCounter">
                            <span class="Total">{xen:number $visitor.alerts_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/likes}"><i class="fa fa-thumbs-up fa-lg fa-fw" ></i>{xen:phrase likes_youve_received}</a></li>
                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}"><i class="fa fa-comments fa-lg fa-fw" ></i>{xen:phrase your_content}</a></li>
                    <li><a href="{xen:link account/following}"><i class="fa fa-group fa-lg fa-fw" ></i>{xen:phrase people_you_follow}</a></li>
                    <li><a href="{xen:link account/ignored}"><i class="fa fa-minus-circle fa-lg fa-fw"></i>{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}"><i class="fa fa-usd fa-lg fa-fw" ></i>{xen:phrase account_upgrades}</a></li></xen:if>
                    <li><a href="{xen:link account/two-step}"><i class="fa fa-shield fa-lg fa-fw"></i>{xen:phrase two_step_verification}</a></li>
                </xen:hook>
                </ul>
            </div>
 
Top Bottom