FontAwesome Icons in Visitor Tab & Account Wrapper

FontAwesome Icons in Visitor Tab & Account Wrapper

Matthew Hawley

Well-known member
yolulz submitted a new resource:

[LetsPWN] FontAwesome Icons in Visitor Tab & Account Wrapper - FontAwesome!

FontAwesome Website: http://fortawesome.github.io/Font-Awesome/

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

Code:
ink href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">

2. Go to navigation_visitor_tab and replace everything between

Code:
<div class="menuColumns secondaryContent">
 
</div>

with

Code:
<ul class="col1 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links1">...

Read more about this resource...
 
Heh, I actually integrated FontAwesome in my custom style since months (although it can look boring when all icons have the same color).
 
Very cool man, honestly never thought of doing it like this haha :D
If each link had a class for the li tag you could just use the :before method of inserting the icon.

I did that with one style when I was testing out some things.
 
The best way to do this is with TMS. Via click you can disable and enable icons and easily change them.
 
yoululz....

My only question, what about the add-ons that add other links inside that area?
fontawesome1.webp

Pokes...
Bookmarks...
Ratings Given...
Ratings Received...

Or is there a way to pick and choose which icons you want to match with what...
 
Took me a bit, but got the alignment much better.

Before.........................................After
before.webp after.webp

Here is the adjusted code:
Code:
            <div class="menuColumns secondaryContent">
<ul class="col1 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links1">
                    <li><a href="{xen:link account/personal-details}"><i class="icon-user icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase personal_details}</a></li>
                    <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}"><i class="icon-pencil icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase signature}</a></li></xen:if>
                    <li><a href="{xen:link account/contact-details}"><i class="icon-book icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase contact_details}</a></li>
                    <li><a href="{xen:link account/privacy}"><i class="icon-lock icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase privacy}</a></li>
                    <li><a href="{xen:link account/preferences}"><i class="icon-cog icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase preferences}</a></li>
                    <li><a href="{xen:link account/alert-preferences}"><i class="icon-wrench icon-large icon-fixed-width" style="padding-right:8px;"></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="icon-picture icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase avatar}</a></li></xen:if>
                    <xen:if is="{$xenOptions.facebookAppId}"><li><a href="{xen:link account/facebook}"><i class="icon-facebook icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase facebook_integration}</a></li></xen:if>
                    <li><a href="{xen:link account/security}"><i class="icon-key icon-large icon-fixed-width" style="padding-right:8px;"></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="icon-rss icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a href="{xen:link account/alerts}"><i class="icon-exclamation-sign icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase your_alerts}</a></li>
                    <li><a href="{xen:link watched/threads}"><i class="icon-eye-open icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase watched_threads}</a></li>
                    <li><a href="{xen:link account/likes}"><i class="icon-thumbs-up icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase likes_youve_received}</a></li>
                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}"><i class="icon-comments icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase your_content}</a></li>
                    <li><a href="{xen:link account/following}"><i class="icon-group icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase people_you_follow}</a></li>
                    <li><a href="{xen:link account/ignored}"><i class="icon-ban-circle icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}"><i class="icon-circle-arrow-up icon-large icon-fixed-width" style="padding-right:8px;"></i>{xen:phrase account_upgrades}</a></li></xen:if>
                </xen:hook>
                </ul>
            </div>
 
Wouldn't it just be easier to add this declaration to the Extras.CSS?

Code:
menuColumns secondaryContent li { padding-right:8px;}
and remove the CSS properties in the template?

I tried that, didn't work. Its the way his template modification is set up. The images are different sizes for one.
 
Ah, I got the css declaration wrong. It should be
Code:
 menuColumns secondaryContent li i{ padding-right: 8px; }
 
Top Bottom