FontAwesome Icons in Visitor Tab & Account Wrapper

Matthew Hawley · May 25, 2013

yolulz submitted a new resource:

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

Code:
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...

Russ · May 25, 2013

Very cool man, honestly never thought of doing it like this haha

Matthew Hawley · May 25, 2013

Oh crap I didn't I add the facebook icon... give me a sec..

yavuz · May 25, 2013

This would make an excellent addon

Better TMS modification

Great stuff

Matthew Hawley · May 25, 2013

yolulz updated [LetsPWN] FontAwesome Icons in Visitor Tab & Account Wrapper with a new update entry:

Facebook Icon

Forgot to add the facebook icon. Added it.

Read the rest of this update entry...

Luxus · May 25, 2013

Heh, I actually integrated FontAwesome in my custom style since months (although it can look boring when all icons have the same color).

Forsaken · May 25, 2013

Russ said:
Very cool man, honestly never thought of doing it like this haha

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.

Luxus · May 26, 2013

The best way to do this is with TMS. Via click you can disable and enable icons and easily change them.

rdn · May 26, 2013

Luxus said:
The best way to do this is with TMS. Via click you can disable and enable icons and easily change them.

Mind of sharing it ?

Sheldon · May 26, 2013

RoldanLT said:
Mind of sharing it ?

Likely repeat yolulz's code, but use it on the TMS system instead of your normal templates.

Sheldon · May 26, 2013

yoululz....

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

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

Or is there a way to pick and choose which icons you want to match with what...

Sheldon · May 26, 2013

Matthew Hawley · May 26, 2013

Use the like icon for ratings received. I would use icon-magic for ratings given. For bookmarks you can use icon-bookmark or icon-bookmark-empty. For pokes, icon-hand-left, right, up, or down.

Here is a list of icons. http://fortawesome.github.io/Font-Awesome/icons/[/

Sheldon · May 26, 2013

yolulz said:
Use the like icon for ratings received. I would use icon-magic for ratings given. For bookmarks you can use icon-bookmark or icon-bookmark-empty. For pokes, icon-hand-left, right, up, or down.

Here is a list of icons. http://fortawesome.github.io/Font-Awesome/icons/[/

They are also in different templates, in case others are wondering.

dvsDave · May 26, 2013

Definitely would love to see this as mod made TMS compatible.

Sheldon · May 26, 2013

Took me a bit, but got the alignment much better.

Before.........................................After

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>

Sheldon · May 26, 2013

dvsDave said:
Definitely would love to see this as mod made TMS compatible.

Simply follow the steps he posted, and just use TMS. Instead of directly editing the template, all you are doing is adding in via TMS.

dvsDave · May 26, 2013

stewart1champ said:
Took me a bit, but got the alignment much better.

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?

Sheldon · May 26, 2013

dvsDave said:
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.

dvsDave · May 26, 2013

Ah, I got the css declaration wrong. It should be

Code:

 menuColumns secondaryContent li i{ padding-right: 8px; }

FontAwesome Icons in Visitor Tab & Account Wrapper

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy