1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained FontAwesome Icons in Visitor Tab & Account Wrapper

FontAwesome!

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    yolulz submitted a new resource:

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

    Read more about this resource...
     
  2. Russ

    Russ Well-Known Member

    Very cool man, honestly never thought of doing it like this haha :D
     
    Matthew Hawley likes this.
  3. Matthew Hawley

    Matthew Hawley Well-Known Member

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

    yavuz Well-Known Member

    This would make an excellent addon :p Better TMS modification :) Great stuff (y)
     
  5. Matthew Hawley

    Matthew Hawley Well-Known Member

  6. Luxus

    Luxus Well-Known Member

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

    Forsaken Well-Known Member

    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.
     
  8. Luxus

    Luxus Well-Known Member

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

    RoldanLT Well-Known Member

    Mind of sharing it ? :)
     
  10. Sheldon

    Sheldon Well-Known Member

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

    Sheldon Well-Known Member

    yoululz....

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

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

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

    Sheldon Well-Known Member

  13. Matthew Hawley

    Matthew Hawley Well-Known Member

    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/[/
     
  14. Sheldon

    Sheldon Well-Known Member

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

    dvsDave Well-Known Member

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

    Sheldon Well-Known Member

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

    Before.........................................After
    before.png after.png

    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>
     
    Alfa1 and shenmuee like this.
  17. Sheldon

    Sheldon Well-Known Member

    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.

    tms.png
     
  18. dvsDave

    dvsDave Well-Known Member


    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?
     
  19. Sheldon

    Sheldon Well-Known Member

    I tried that, didn't work. Its the way his template modification is set up. The images are different sizes for one.
     
  20. dvsDave

    dvsDave Well-Known Member

    Ah, I got the css declaration wrong. It should be
    Code:
     menuColumns secondaryContent li i{ padding-right: 8px; }
     

Share This Page