Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

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

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 08:37 AM #1

Go to: Design >> Layouts >> [scroll down to the footer] >> Add block >> HTML block >> [Name: Font-Awesome] >>

Posted Image

Content [copy and paste this code]:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

>> [Save]
Posted Image

EDIT: :mrgreen:

Hi Rafass,

Calling in to the body the css it will work but this is bad practice :D
Is better to add link to font-awesome.min.css by using a hook and place the css into the head ;)


#file

design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
#content
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

I hope that helps,

---
Valentin
part of hungryweb.net


You can take a look at your new icons here: http://fortawesome.g...-Awesome/icons/

Choose the icon that you want to use: [example:]

Posted Image
Copy your code:

Posted Image

Use that code in your website [Example:]

Posted Image

Posted Image

And enjoy! 8)

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 23 July 2014 - 08:59 AM #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 font-awesome.min.css by using a hook and place the css into the head ;)


#file
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
#content
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">

PS: Loading so many icons and use a few i consider you will increase loading speed, a better solution is http://fontello.com/ you choose only icons that you need and you can simply implement to cs-cart ;) in this way you will load only what you need, nothing extra.

I hope that helps,

---
Valentin
part of hungryweb.net

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 09:03 AM #3

You rock Vali! :mrgreen:
I'll use the hook then.
Thank you bro! :mrgreen:

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 23 July 2014 - 09:08 AM #4

Please check also http://fontello.com/ ;)

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 09:31 AM #5

Please check also http://fontello.com/ ;)

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:
Posted Image
How can I put it in my website?

I've downloaded this files:

Posted Image
But I don't know how to use it.

Would be great some explanation for newbies :mrgreen:

Thanks Again Vali :mrgreen:

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 09:48 AM #6

Hi Rafass,

Calling in to the body the css it will work but this is bad practice :D
Is better to add link to font-awesome.min.css by using a hook and place the css into the head ;)


#file

design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
#content
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">

---
Valentin
part of hungryweb.net


I've put:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">
in:
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/meta.post.tpl
But doesn't show up the icons. :confused:

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 23 July 2014 - 10:55 AM #7

Did you:
  • clear cache admin.php?cc&ctpl
  • have My Changes add-on active?
---
Valentin
part of hungryweb.net

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 11:04 AM #8

Did you:

  • clear cache admin.php?cc&ctpl
  • have My Changes add-on active?
---
Valentin
part of hungryweb.net


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. :/

Posted Image

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 23 July 2014 - 11:52 AM #9

:))) where is

meta.post.tpl

?

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 23 July 2014 - 01:07 PM #10

:))) where is

meta.post.tpl
?


oww yeah, works perfect now, sorry.
anyway, I would like to know how to use Fontello, will be really appreciated some instructions to know it.
thanks for your help Vali!