Resource icon

Font Awesome Icons in Tablinks

Overview Updates (2) Reviews (8) Discussion
M

Matthew Hawley

Well-known member
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...
Click to expand...

Read more about this resource...
 
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>
 
mladiucitelj said:
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>
Click to expand...

BTW I changed three of them.
 
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>
 
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?
 
tom2tom said:
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?
Click to expand...

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.
 
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?
 
Icons missing. When try in browser direct access to css see error AccessDenied

Some server issue. Problem resolved.
 
Last edited:
You must log in or register to reply here.

Similar threads

K
XF 2.2 Using weight-independent font awesome icons in phrases
Replies
4
Views
738
Kirby
K
M
Font Awesome Icons in Navbar for 2.1
2 3
Replies
47
Views
8K
CTS
C
M
Font Awesome Icons as Individual Node Icons
Replies
15
Views
5K
upnet
upnet
Back
Top Bottom