Font Awesome Icons in Dropdown Account Information

by Oxygen - 23-12-2015, 01:36 PM
<div class="postbit-usertitle">
Posts:
646
Joined:
Feb 2015
Likes:
50
Credits:
1,198
Reputation:
35
2 Years of Service
#1
OP
Posted: 23-12-2015, 01:36 PM
FontAwesome Website: http://fontawesome.io/get-started/
List of icons:
http://fontawesome.io/icons/

[Image: b3444cb63071391fdfc1d11a300580c8.png]




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}"><i class="fa fa-user fa-large fa-fixed-width" style="padding-right:7px;"></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-large fa-fixed-width" style="padding-right:7px;"></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-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase contact_details}</a></li></xen:if>
<li><a href="{xen:link account/privacy}"><i class="fa fa-lock fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase privacy}</a></li>
<li><a href="{xen:link account/preferences}" class="OverlayTrigger"><i class="fa fa-cog fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase preferences}</a></li>
<li><a href="{xen:link account/alert-preferences}"><i class="fa fa-bell-o fa-large fa-fixed-width" style="padding-right:7px;"></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-picture-o fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase avatar}</a></li></xen:if>
<xen:if is="{$xenOptions.facebookAppId}"><li><a href="{xen:link account/facebook}"><i class="fa fa-facebook fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase facebook_integration}</a></li></xen:if>
<li><a href="{xen:link account/security}"><i class="fa fa-key fa-large fa-fixed-width" style="padding-right:7px;"></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-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_news_feed}</a></li></xen:if>
<li><a href="{xen:link conversations}"><i class="fa fa-inbox fa-large fa-fixed-width" style="padding-right:7px;"></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-exclamation-circle icon-large fa-fixed-width" style="padding-right:7px;"></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-large fa-fixed-width" style="padding-right:7px;"></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 icon-large icon-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_content}</a></li>
<li><a href="{xen:link account/following}"><i class="fa fa-group fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_follow}</a></li>
<li><a href="{xen:link account/ignored}"><i class="fa fa-ban fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_ignore}</a></li>
<xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}"><i class="fa fa-arrow-circle-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{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"><i class="fa fa-sign-out fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-exclamation-circle fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-rss fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase your_news_feed}</a></li></xen:if>
<li><a
class="{xen:if "{$selectedKey} == 'alerts/likes'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/likes}"><i class="fa fa-thumbs-o-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase likes_youve_received}</a></li>
<li><a
class="primaryContent"
href="{xen:link watched/threads}"><i class="fa fa-comment fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase watched_threads}</a></li>
<li><a
class="primaryContent"
href="{xen:link watched/forums}"><i class="fa fa-comments fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase watched_forums}</a></li>
</xen:hook>
</ul>
</li>

<!-- slot: pre_conversations -->

<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}"><i class="fa fa-inbox fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-envelope fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase start_new_conversation}</a></li></xen:if>
</xen:hook>
</ul>
</li>

<!-- slot: pre_settings -->

<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}"><i class="fa fa-user fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-pencil fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase signature}</a></li></xen:if>
<li><a
class="{xen:if "{$selectedKey} == 'account/contactDetails'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/contact-details}"><i class="fa fa-book fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase contact_details}</a></li>
<li><a
class="{xen:if "{$selectedKey} == 'account/privacy'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/privacy}"><i class="fa fa-lock fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase privacy}</a></li>
<li><a
class="{xen:if "{$selectedKey} == 'account/preferences'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/preferences}"><i class="fa fa-cog fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase preferences}</a></li>
<li><a
class="{xen:if "{$selectedKey} == 'account/alertPreferences'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/alert-preferences}"><i class="fa fa-bell fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase alert_preferences}</a></li>
<li><a
class="{xen:if "{$selectedKey} == 'account/following'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/following}"><i class="fa fa-group fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase people_you_follow}</a></li>
<li><a
class="{xen:if "{$selectedKey} == 'account/ignored'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/ignored}"><i class="fa fa-ban fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-arrow-circle-up fa-large fa-fixed-width" style="padding-right:7px;"></i>{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}"><i class="fa fa-chain-broken fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase external_accounts}</a></li></xen:if>
<li><a
class="{xen:if "{$selectedKey} == 'account/security'", 'secondaryContent', 'primaryContent'}"
href="{xen:link account/security}"><i class="fa fa-key fa-large fa-fixed-width" style="padding-right:7px;"></i>{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"><i class="fa fa-sign-out fa-large fa-fixed-width" style="padding-right:7px;"></i>{xen:phrase log_out}</a></li>
You may have to add "color: #;" in the style= to suit your needs.

[Image: 273d18f1ef757c6c9c7b1d59f3f5448a.png]
[Image: UeTXrZ5.png]
awd
20-06-2017, 09:04 PM
Lurker
Posts:
4
Joined:
Feb 2016
Likes:
0
Credits:
4
Reputation:
0
1 Year of Service
#2
Posted: 26-02-2016, 09:16 PM
I really need was there too. a better working.
Thank you
Novice
Prime
Posts:
36
Joined:
Sep 2015
Likes:
2
Credits:
9
Reputation:
0
1 Year of Service
#3
Posted: 28-04-2016, 07:20 PM
thank u for the good tutorial
Newbie
Posts:
14
Joined:
Jan 2017
Likes:
0
Credits:
3
Reputation:
0
1/2 Year of Service
#4
Posted: 08-01-2017, 08:22 PM
what a useful tutorial, thanks.
Newbie
Posts:
15
Joined:
Feb 2017
Likes:
1
Credits:
18
Reputation:
0
1/2 Year of Service
#5
Posted: 21-02-2017, 02:39 AM
font-awesome icons tend to be the best to go with the flat styles, thank you for this.
Closed Account
Posts:
16
Joined:
Feb 2017
Likes:
0
Credits:
10
Reputation:
0
#6
Posted: 27-02-2017, 07:45 PM
Thanks for this. Nice very nice
Novice
Posts:
29
Joined:
Feb 2017
Likes:
0
Credits:
-98
Reputation:
0
#7
Posted: 27-02-2017, 07:46 PM
it looks awesome with the icons, just going to test
Newbie
Posts:
15
Joined:
Mar 2017
Likes:
0
Credits:
15
Reputation:
0
#8
Posted: 03-03-2017, 08:45 PM
Heck yeah ill be trying this right away
Newbie
Posts:
15
Joined:
May 2017
Likes:
0
Credits:
15
Reputation:
0
#9
Posted: 02-05-2017, 10:12 AM
Pretty nice, eventho it can get really ugly with too many icons. Thanks nayway
Newbie
Posts:
15
Joined:
May 2017
Likes:
0
Credits:
15
Reputation:
0
#10
Posted: 11-05-2017, 02:05 AM
Acho que um código fonte pra isso seria simples, fácil e rápido
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)