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

Font Awesome Icons in Tablinks

Matthew Hawley

Well-known member
#1
Matthew Hawley submitted a new resource:

Font Awesome Icons in Tablinks - FontAwesome!

1. Go to PAGE_CONTAINER and add this somewhere in the <head>
Code:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
2. Go to navigation and find:
Code:
<ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link...
Read more about this resource...
 

BassMan

Well-known member
#2
I've added icons for Resource manager.

Replace content in resources_tab_links template with this:
HTML:
<ul class="secondaryContent blockLinksList">
    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=resource_update'}"><i class="icon-search" style="padding-right: 3px;"></i>{xen:phrase search_resources}</a></li></xen:if>
    <li><a href="{xen:link resources/authors}"><i class="icon-user" style="padding-right: 3px;"></i>{xen:phrase most_active_authors}</a></li>
    <xen:if is="{$visitor.user_id} && {$visitor.resource_count}"><li><a href="{xen:link resources/authors, $visitor}"><i class="icon-book" style="padding-right: 3px;"></i>{xen:phrase your_resources}</a></li></xen:if>
    <xen:if is="{$visitor.user_id}"><li><a href="{xen:link resources/watched}"><i class="icon-comment" style="padding-right: 3px;"></i>{xen:phrase watched_resources}</a></li></xen:if>
</ul>
 

Matthew Hawley

Well-known member
#4
I've added icons for Resource manager.

Replace content in resources_tab_links template with this:
HTML:
<ul class="secondaryContent blockLinksList">
    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=resource_update'}"><i class="icon-search" style="padding-right: 3px;"></i>{xen:phrase search_resources}</a></li></xen:if>
    <li><a href="{xen:link resources/authors}"><i class="icon-user" style="padding-right: 3px;"></i>{xen:phrase most_active_authors}</a></li>
    <xen:if is="{$visitor.user_id} && {$visitor.resource_count}"><li><a href="{xen:link resources/authors, $visitor}"><i class="icon-book" style="padding-right: 3px;"></i>{xen:phrase your_resources}</a></li></xen:if>
    <xen:if is="{$visitor.user_id}"><li><a href="{xen:link resources/watched}"><i class="icon-comment" style="padding-right: 3px;"></i>{xen:phrase watched_resources}</a></li></xen:if>
</ul>
BTW I changed three of them.
 

BassMan

Well-known member
#6
And also added some arrow icons in resource_category_sidebar_list template (if anybody would like it). Replace everything with this:
HTML:
<ol>
<xen:foreach loop="$categories" value="$_category">
    <li class="{xen:if '{$_category.resource_category_id} == {$category.resource_category_id}', selected}">
        <a href="{xen:link resources/categories, $_category}" {xen:if $_category.category_description, 'title="{xen:helper striphtml, $_category.category_description}" class="Tooltip" data-tipclass="resourceCategoryTooltip"'}><i class="icon-caret-right" style="padding-right: 3px;"></i>{$_category.category_title}</a>
        <span class="count">{xen:number $_category.resource_count}</span>
    </li>
    <xen:if is="{$_category.resource_category_id} == {$showChildId}">
        {xen:raw $childCategoryHtml}
    </xen:if>
</xen:foreach>
</ol>
 
#7
Tried to apply this but resulted in a green background in the main body.
Trying to undo it quickly i pressed "reset template" which wasnt the best idea.
Now my header menu is located just over the footer. Can anybody help out?
 

Matthew Hawley

Well-known member
#8
Tried to apply this but resulted in a green background in the main body.
Trying to undo it quickly i pressed "reset template" which wasnt the best idea.
Now my header menu is located just over the footer. Can anybody help out?
Well as a general tip, press CRTL + Z if you want to revert a quick change you've made. Your header / footer problem is most likely because you have a custom skin.

Also, it is better for you to ask the question here: http://xenforo.com/community/forums/styling-and-customization-questions.47/ And include a link to your forum.
 
#9
When I attempted STEP TWO of this it messed up my navigation. I do have the font awesome icons that @Sheldon posted to replace username, conversation and alerts.

Also do you know what I need to do to get an icon on the forum rules part of the sub-nav bar?