Font Awesome Icons in Dropdown Account Information

webshark25 · 20-07-2017, 06:31 AM

23-12-2015, 01:36 PM
Oxygen Wrote: FontAwesome Website: http://fontawesome.io/get-started/
List of icons:
http://fontawesome.io/icons/

1. Go to PAGE_CONTAINER and add this code in the <head>

Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2. Go to navigation_visitor_tab and replace everything between

Code:
<ul class="col1 blockLinksList"> </ul>
Code:
<xen:hook name="navigation_visitor_tab_links1"> <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if> <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if> <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li></xen:if> <li><a href="{xen:link account/privacy}">{xen:phrase privacy}</a></li> <li><a href="{xen:link account/preferences}" class="OverlayTrigger">{xen:phrase preferences}</a></li> <li><a href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li> <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true">{xen:phrase avatar}</a></li></xen:if> <xen:if is="{$xenOptions.facebookAppId}"><li><a href="{xen:link account/facebook}">{xen:phrase facebook_integration}</a></li></xen:if> <li><a href="{xen:link account/security}">{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}">{xen:phrase your_news_feed}</a></li></xen:if> <li><a href="{xen:link conversations}">{xen:phrase conversations} {xen:number $visitor.conversations_unread} </a></li> <li><a href="{xen:link account/alerts}">{xen:phrase alerts} {xen:number $visitor.alerts_unread} </a></li> <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}">{xen:phrase your_content}</a></li> <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li> <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li> <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if> </xen:hook> </ul> </div> <div class="menuColumns secondaryContent"> <ul class="col1 blockLinksList"> <li> <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm"> <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} /> {xen:phrase show_online_status}</label> <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" /> </form> </li> </ul> <ul class="col2 blockLinksList"> <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
You may have to add "color: #;" in the style= to suit your needs.
3) Go to account_wrapper and replace everything between

Code:
<li class="section"> </li>
with

Code:
<ul> <xen:hook name="account_wrapper_sidebar_your_account"> <li><a class="{xen:if "{$selectedKey} == 'alerts/latest'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/alerts}">{xen:phrase your_alerts}</a></li> <xen:if is="{$xenOptions.enableNewsFeed}"><li><a class="{xen:if "{$selectedKey} == 'alerts/newsFeed'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if> <li><a class="{xen:if "{$selectedKey} == 'alerts/likes'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> <li><a class="primaryContent" href="{xen:link watched/threads}">{xen:phrase watched_threads}</a></li> <li><a class="primaryContent" href="{xen:link watched/forums}">{xen:phrase watched_forums}</a></li> </xen:hook> </ul> </li>  <li class="section"><h4 class="subHeading">{xen:phrase conversations}</h4> <ul> <xen:hook name="account_wrapper_sidebar_conversations"> <li><a class="{xen:if "{$selectedKey} == 'conversations/view'", 'secondaryContent', 'primaryContent'}" href="{xen:link conversations}">{xen:phrase view_conversations}</a></li> <xen:if is="{$canStartConversation}"><li><a class="{xen:if "{$selectedKey} == 'conversations/add'", 'secondaryContent', 'primaryContent'}" href="{xen:link conversations/add}">{xen:phrase start_new_conversation}</a></li></xen:if> </xen:hook> </ul> </li>  <li class="section"><h4 class="subHeading">{xen:phrase settings}</h4> <ul> <xen:hook name="account_wrapper_sidebar_settings"> <xen:if is="{$canEditProfile}"><li><a class="{xen:if "{$selectedKey} == 'account/personalDetails'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if> <xen:if is="{$canEditSignature}"><li><a class="{xen:if "{$selectedKey} == 'account/signature'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if> <li><a class="{xen:if "{$selectedKey} == 'account/contactDetails'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li> <li><a class="{xen:if "{$selectedKey} == 'account/privacy'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/privacy}">{xen:phrase privacy}</a></li> <li><a class="{xen:if "{$selectedKey} == 'account/preferences'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/preferences}">{xen:phrase preferences}</a></li> <li><a class="{xen:if "{$selectedKey} == 'account/alertPreferences'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li> <li><a class="{xen:if "{$selectedKey} == 'account/following'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li> <li><a class="{xen:if "{$selectedKey} == 'account/ignored'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li> <xen:if is="{$xenCache.userUpgradeCount}"><li><a class="{xen:if "{$selectedKey} == 'account/upgrades'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if> <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a class="{xen:if "{$selectedKey} == 'account/externalAccounts'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/external-accounts}">{xen:phrase external_accounts}</a></li></xen:if> <li><a class="{xen:if "{$selectedKey} == 'account/security'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/security}">{xen:phrase password}</a></li> </xen:hook> </ul>
And replace it with:

Code:
<li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut primaryContent">{xen:phrase log_out}</a></li>
You may have to add "color: #;" in the style= to suit your needs.

Awesome tutorial, I'm totally gonna use it once I reach 15 posts so I can download.

Font Awesome Icons in Dropdown Account Information

Submitted by Oxygen, 23-12-2015, 01:36 PM, Thread ID: 16048

RE: Font Awesome Icons in Dropdown Account Information