Using +439 New Icons In Your Store With Font Awesome ✔ [Tutorial] Thanks Vali - Www.hungryweb.net]

Developers Frontend
1

[color=#282828][font=arial, verdana, tahoma, sans-serif]Go to: [/font][/color]Design[color=#282828][font=arial, verdana, tahoma, sans-serif] >> [/font][/color]Layouts[color=#282828][font=arial, verdana, tahoma, sans-serif] >> [scroll down to the footer] >> [/font][/color]Add block[color=#282828][font=arial, verdana, tahoma, sans-serif] >> [/font][/color]HTML block[color=#282828][font=arial, verdana, tahoma, sans-serif] >> [Name: Font-Awesome] >>[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif][/font][/color]



Content[color=#282828][font=arial, verdana, tahoma, sans-serif] [copy and paste this code]:[/font][/color]


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```<br />
<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]>> [[/font][/color][b]Save[/b][color=#282828][font=arial, verdana, tahoma, sans-serif]][/font][/color]<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]![](upload://dcaZcMjER0GvXDG69hdROlvAfzB.jpeg)[/font][/color]<br />
<br />
[color=#FF0000][b][font=arial, verdana, tahoma, sans-serif]EDIT: <img src="upload://tbe1CncrrOs48cXpHvziOT8r0T3.gif" class="bbc_emoticon" alt=":mrgreen:">[/font][/b][/color]<br />
<br />
[quote name='Vali' timestamp='1406105980' post='188046']<br />
Hi Rafass,<br />
<br />
Calling in to the body the css it will work but this is bad practice <img src="upload://7O47Vg5oKdRIES6TKXXFKIm5Kdf.png" class="bbc_emoticon" alt=":D"><br />
Is better to add link to [color=#FF0000]font-awesome.min.css[/color] by using a hook and place the css into the head <img src="upload://ssa1U17ndImgNZSdwFNmOF2yUgM.png" class="bbc_emoticon" alt=";)"><br />
<br />
<br />
#file```php
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
```<br />
#content```php
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```<br />
<br />
I hope that helps,<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]<br />
[/quote]<br />
<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]You can take a look at your new icons here: [/font][/color][b][url="http://fortawesome.github.io/Font-Awesome/icons/"]http://fortawesome.g...-Awesome/icons/[/url][/b]<br />
<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]Choose the icon that you want to use: [example:][/font][/color]<br />
<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]![](upload://xcAG9rBIjvNvLF6awKMeORw450l.jpeg)[/font][/color]<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]Copy your code:[/font][/color]<br />
<br />
[color=#282828][font=arial, verdana, tahoma, sans-serif]![](upload://lqGWxTFYqHyy5AY7KPIjVszMtI.jpeg)[/font][/color]<br />
<br />
Use that code in your website [Example:]<br />
<br />
![](upload://xY1EYNRERkiKmce7Fi4Ny3GBoOF.jpeg)<br />
<br />
![](upload://8RvXoJufGKyJ24K2oKc1i8fjTkr.jpeg)<br />
<br />
And enjoy! <img src="upload://oPnLkqdJc33Dyf2uA3TQwRkfhwd.gif" class="bbc_emoticon" alt="8)">
2

Hi Rafass,



Calling in to the body the css it will work but this is bad practice :D

Is better to add link to [color=#ff0000]font-awesome.min.css[/color] by using a hook and place the css into the head ;)





#file```php
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl

#content```php
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"<br />
rel="stylesheet">
```<br />
<br />
PS: Loading so many icons and use a few i consider you will increase loading speed, a better solution is [url="http://fontello.com/"]http://fontello.com/[/url] you choose only icons that you need and you can simply implement to cs-cart <img src="upload://ssa1U17ndImgNZSdwFNmOF2yUgM.png" class="bbc_emoticon" alt=";)"> in this way you will load only what you need, nothing extra.<br />
<br />
I hope that helps,<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]
3

You rock Vali! :mrgreen:

I’ll use the hook then.

Thank you bro! :mrgreen:

4

Please check also [url=“http://fontello.com/”]http://fontello.com/[/url] ;)

5

[quote name=‘Vali’ timestamp=‘1406106508’ post=‘188050’]

Please check also [url=“http://fontello.com/”]http://fontello.com/[/url] ;)

[/quote]

Thanks for share your knowledge Vali!

Fontello looks great, I would like to use it, but I can’t understand how.

for example, I would like to use only this icons:



How can I put it in my website?



I’ve downloaded this files:





But I don’t know how to use it.



Would be great some explanation for newbies :mrgreen:



Thanks Again Vali :mrgreen:

6

[quote name=‘Vali’ timestamp=‘1406105980’ post=‘188046’]

Hi Rafass,



Calling in to the body the css it will work but this is bad practice :D

Is better to add link to [color=#ff0000]font-awesome.min.css[/color] by using a hook and place the css into the head ;)





#file```php
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl

#content```php
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"<br />
rel="stylesheet">
```<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]<br />
[/quote]<br />
<br />
I've put: <br />
```php
<br />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"<br />
rel="stylesheet">
```<br />
in:<br />
```php
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
```<br />
But doesn't show up the icons. <img src="upload://6NsJ1i6dTEz64hX1nsujb3m2ygK.gif" class="bbc_emoticon" alt=":confused:">
7

Did you:[list]

[]clear cache admin.php?cc&ctpl

[]have My Changes add-on active?

[/list]

—

Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]

8

[quote name=‘Vali’ timestamp=‘1406112918’ post=‘188063’]

Did you:[list]

[]clear cache admin.php?cc&ctpl

[]have My Changes add-on active?

[/list]

—

Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]

[/quote]



yeah, I’ve used mysite/admin.php?cc=

and: mysite/admin.php?ctpl



the addons is actived and working perfect. I always use it to change the css.

but in this case, doesn’t show up the icons. I don’t know why. :confused:



764×253 26.1 KB

9

:))) where is ```php


meta.post.tpl

10

[quote name=‘Vali’ timestamp=‘1406116373’ post=‘188067’]

:))) where is ```php


meta.post.tpl

[/quote]<br />
<br />
oww yeah, works perfect now, sorry.<br />
anyway, I would like to know how to use [u]Fontello[/u], will be really appreciated some instructions to know it.<br />
thanks for your help Vali!