- Compatible XF 1.x versions
- 1.3
- Additional requirements
- Font-Awesome
- License
- Creative Commons
What i am going to show you is how to use Font-Awesome Icons within your main XF Navigation bar... This method is the only way ive managed to make this work and i must state ive been out of this Webmaster Game for some time now so this may not be the best solution to achieving this.
EDIT: Add me on Skype: Expertpixels.com is my Skype Addy, If your experiencing issues implementing this i am more than happy to help you get this working.. I will be releasing a Addon for this in coming weeks to make this easier for all.
Full Size Image: http://i.imgur.com/eqH6J1A.png
Ok you will need to visit: http://fortawesome.github.io/Font-Awesome/get-started/ (Make sure you grab the latest version available).
The preceding code should be placed within the head section of the XF Template: PAGE_CONTAINER (I place mine just before the end the of the closing </head> section.
Now in order to make our new fonts appear next to our Navigation Tabs you will need to add some simple little scripts. (I am adding them to the end of the XF Template: Header) Now this is what i have on my Development XF Install.. The below code will Inject the FA Classes needed to make the icons appear.
Please Note: I have these addons installed (Yours may be different): XenResource, Microcart (A must have addon for any site looking to sell items). I also am using the "Nodes as Tabs" addon to produce my custom home page.
A copy of my XF header Template is included in a .txt format and is downloadable use the "Download Resource" Button.. It's pointless but will help you understand where ive placed the scripts above.
The above is targeting my selectors (YOURS MAY BE VERY DIFFERENT !!) now this method can get tricky & frustrating at times but as far as ive worked out it's working well for me at least. I am more than happy to assist anyone wishing to do this, Now ive only scratched the surface as what / where these icons (or any other website related resource) could be injected into a XF based project.
Please Note: If you decide to use my method above to provide free or commercial XF Styles to the community I simply ask that you acknowledge my work.. As simple as this is it took a lot of time to work out what was the most suitable / cross-browser friendly method to achieve this... Not only has the method above assist with icons it now opens up endless possibilities to implement other features.
This is only my method (It's working for me so far).. As i am only just getting back into XenForo please do not attack me if you have a better method of doing this.. I am very willing to learn and will update all my Tutorials / Guides and also my Free & Commercial XenForo Styles if the XF community are able to provide feedback / suggestions and or even just point out any mistakes i may of made.
Regards, Darren
EDIT: Add me on Skype: Expertpixels.com is my Skype Addy, If your experiencing issues implementing this i am more than happy to help you get this working.. I will be releasing a Addon for this in coming weeks to make this easier for all.
Full Size Image: http://i.imgur.com/eqH6J1A.png
Ok you will need to visit: http://fortawesome.github.io/Font-Awesome/get-started/ (Make sure you grab the latest version available).
The preceding code should be placed within the head section of the XF Template: PAGE_CONTAINER (I place mine just before the end the of the closing </head> section.
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">Now in order to make our new fonts appear next to our Navigation Tabs you will need to add some simple little scripts. (I am adding them to the end of the XF Template: Header) Now this is what i have on my Development XF Install.. The below code will Inject the FA Classes needed to make the icons appear.
Please Note: I have these addons installed (Yours may be different): XenResource, Microcart (A must have addon for any site looking to sell items). I also am using the "Nodes as Tabs" addon to produce my custom home page.
Code:
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-home fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".publicTabs .nodetab3 .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-keyboard-o fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".forums .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-folder-open fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".publicTabs .resources .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-group fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".publicTabs .members .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-cogs fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".visitorTabs .navLink .accountUsername" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-comments fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".navTabs .visitorTabs .inbox .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-flag fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".navTabs .alerts .navLink" );
</script>
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-shopping-cart fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".navTabs .micro-cart .navLink" );
</script>A copy of my XF header Template is included in a .txt format and is downloadable use the "Download Resource" Button.. It's pointless but will help you understand where ive placed the scripts above.
The above is targeting my selectors (YOURS MAY BE VERY DIFFERENT !!) now this method can get tricky & frustrating at times but as far as ive worked out it's working well for me at least. I am more than happy to assist anyone wishing to do this, Now ive only scratched the surface as what / where these icons (or any other website related resource) could be injected into a XF based project.
Please Note: If you decide to use my method above to provide free or commercial XF Styles to the community I simply ask that you acknowledge my work.. As simple as this is it took a lot of time to work out what was the most suitable / cross-browser friendly method to achieve this... Not only has the method above assist with icons it now opens up endless possibilities to implement other features.
This is only my method (It's working for me so far).. As i am only just getting back into XenForo please do not attack me if you have a better method of doing this.. I am very willing to learn and will update all my Tutorials / Guides and also my Free & Commercial XenForo Styles if the XF community are able to provide feedback / suggestions and or even just point out any mistakes i may of made.
Regards, Darren
- Related resources
- Font-Awesome <-- A Huge Thanks to those guys
