Font awesome for block category

[glafuski]

So i was thinking how to add font awesome icons to my vertical menu(block categories). I tried to edit category-tree-branch.tpl file like this
 

<li class="category_{$node.id}{if isset($last) && $last == 'true'} last{/if}">

<a href="{$node.link|escape:'html':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}

 

{if $node.id==12}

<i class="fa fa-globe"></i>

{/if}

{if $node.id==13}

<i class="fa fa-wrench"></i>

{/if}

{if $node.id==14}

<i class="fa fa-example"></i>

{/if}

 

 

It still doesnt work and i need help with this, i have tried everything to add font-awesome icons to my menu without results.

Here is my shop https://comphonix.fi/kauppa/

 

Edit: I use medialoader 1.1.0 module to load font-awesome files and yes i have checked that the files loads correctly.

Edited March 9, 2015 by glafuski (see edit history)

[glafuski]

Anyone please? I really need help with this 

[glafuski]

Well all i can say that this forum is so useless now, there's no one helping me out of this situation and now i have to try solve it by myself when i have tried everything, thanks for nothing   

[Dh42]

PrestaShop does not use the fontawesome css file. You have to define your classes in the css to reference them. 

[glafuski]

PrestaShop does not use the fontawesome css file. You have to define your classes in the css to reference them. 

Well next thing is that how could i get <li> elements load their id numbers like this <li id="category-id"></li> then it would be possible, i have been looking that option too but havent seen it, just trying to modify files.

[slykereven]

Hi, i had to do the same thing and after some search find your post.

You give me a hint to find a solution.

So to have awesomefont in vertical menu, i modify the category-tree-branch.tpl in the Theme directory

<li {if isset($last) && $last == 'true'}class="last"{/if}>
	<a 
	href="{$node.link|escape:'html':'UTF-8'}"{if isset($currentCategoryId) && $node.id == $currentCategoryId} class="selected"{/if} title="{$node.name|escape:'html':'UTF-8'}">
		{if $node.name == 'COXYCELTE'}<i class="fa fa-square" style="color: #ab0016"></i>{/if}
		{if $node.name == 'COXYDENTITE'}<i class="fa fa-square" style="color: #d9652c"></i>{/if}
		{if $node.name == 'COXYLETTRES'}<i class="fa fa-square" style="color: #b9d498"></i>{/if}
		{if $node.name == 'COXYLOVE'}<i class="fa fa-square" style="color: #810b24"></i>{/if}
		{if $node.name == 'HIBISCUS'}<i class="fa fa-square" style="color: #0089bd"></i>{/if}
		{if $node.name == 'PERSONNALISATION'}<i class="fa fa-square" style="color: #8f5793"></i>{/if}
		{if $node.name == 'PIN-UP'}<i class="fa fa-square" style="color: #c12859"></i>{/if}
		{if $node.name == 'SYMBOLES'}<i class="fa fa-square" style="color: #348341"></i>{/if}
		{if $node.name == 'TRISKELL'}<i class="fa fa-square" style="color: #003d84"></i>{/if}
		{if $node.name == 'VILLES & MONUMENTS'}<i class="fa fa-square" style="color: #eabc3b"></i>{/if}
		{if $node.name == 'ANIMAUX'}<i class="fa fa-square" style="color: #d9652c"></i>{/if}
		{if $node.name == 'TENUES'}<i class="fa fa-square" style="color: #eabc3b"></i>{/if}
		{if $node.name == 'FLEURS'}<i class="fa fa-square" style="color: #0089bd"></i>{/if}
		{$node.name|escape:'html':'UTF-8'}
	</a>
	{if $node.children|@count > 0}
		<ul>
			{foreach from=$node.children item=child name=categoryTreeBranch}
				{if $smarty.foreach.categoryTreeBranch.last}
					{include file="$branche_tpl_path" node=$child last='true'}
				{else}
					{include file="$branche_tpl_path" node=$child last='false'}
				{/if}
			{/foreach}
		</ul>
	{/if}
</li>

Just write  $node.name == 'your category name' and your awesomefont with some style <i class="fa fa-square" style="color: #ab0016">

Works fine and fast to make if you've few categories.

Hope that will help

[blackflow]

Presta uses only part of FO. 
https://www.prestasoo.com/Blog/prestashop-1-6-icons-list.html
 

[slykereven]

I think you're right, i use another plugin who use FO, so i have other icons, or you can had <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">  in the header to have all of them