Jump to content

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

Adding font Awesome to my cs cart Rate Topic   * * * * * 1 votes

 
  • ravt
  • Junior Member
  • Members
  • Join Date: 11-Aug 10
  • 195 posts

Posted 18 October 2013 - 07:59 PM #1

Hi,

I am trying to add font Awesome to my site for the icons

http://fortawesome.g...me/get-started/

I just want to include

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
I Retied to add them in styles.post.tpl under mychange

with {style src="addons/my_changes/mystyles.less"}
{style src="addons/my_changes/mystyles.css"}  

{style src="[color=#D44950][font=Menlo, Monaco, Consolas,]//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"[/font][/color]}
{style src="[font=Menlo, Monaco, Consolas,]//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"[/font][color=inherit][font=Menlo, Monaco, Consolas,] [/font][/color][font=Menlo, Monaco, Consolas,]rel=[/font][font=Menlo, Monaco, Consolas,]"stylesheet"[/font]}



Nothing worked.

Any suggestion guys
After all its simple

 
  • ravt
  • Junior Member
  • Members
  • Join Date: 11-Aug 10
  • 195 posts

Posted 19 October 2013 - 03:43 AM #2

i even tried to create meta.post.tpl in the same hook/index folder and kept that link line in that page. Still nothing positive.

Any support from cs expert will be much appreciated.


Thanks
After all its simple

 
  • ravt
  • Junior Member
  • Members
  • Join Date: 11-Aug 10
  • 195 posts

Posted 21 October 2013 - 06:19 AM #3

any update guys.. Hope some one from comm would have implemented it. It would be helpful if you guys share your knowledge.


Thanks,
After all its simple

 
  • mon
  • Newbie
  • Trial users
  • Join Date: 21-Oct 13
  • 6 posts

Posted 21 October 2013 - 07:34 AM #4

open "design" — "template editor" — open your theme (basic) — in your theme open "templates" folder — edit index.tpl:
after
just add your link

 
  • ravt
  • Junior Member
  • Members
  • Join Date: 11-Aug 10
  • 195 posts

Posted 21 October 2013 - 10:49 AM #5

Ok guys I found solution for this issue :

Create Meta.post.tpl
under your template--> addons-->my_changes-->hooks-->index folder

and place this code

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


its works so fine.

Now you can call any Icons from there collections.


hope it helps for people around here.

Regards,
After all its simple

 
  • Els
  • Newbie
  • Trial users
  • Join Date: 30-Aug 13
  • 5 posts

Posted 13 December 2013 - 12:18 PM #6

Hi ravt,

thanks a lot for sharing this. It works great! :grin:

greetings,
Els

 
  • alex-pro
  • Advanced Member
  • Trial users
  • Join Date: 07-Nov 13
  • 95 posts

Posted 14 December 2013 - 01:02 AM #7

I used another way to add FontAwesome.

First you need to download font awesome from official website, then upload font files from folder "fonts" into design>themes>your_theme>media>fonts

Next you need place CSS rule into one of stylesheet in your css folder, im added code into glyphs.css, which also loads Glyphs font and sets icon shortcodes.

@font-face {
    font-family: 'FontAwesome';
    src:url('../media/fonts/fontawesome-webfont.eot');
    url('../media/fonts/fontawesome-webfont.woff') format('woff'),
    url('../media/fonts/fontawesome-webfont.ttf') format('truetype'),
    url('../media/fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

next you can edit some element to font awesome.

for example

exclude firstly element from glyphs style, and make secondary for awesome.

for example i use icon-down-micro, ofcourse you need make changes to sizes and styles.

.icon-down-micro {
font-family: 'FontAwesome';
speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: 10px;
    text-align:right;
}


.icon-down-micro:before {
    content: "\f078"; //e01d
}



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

Posted 19 July 2014 - 01:24 AM #8

Ok guys I found solution for this issue :

Create Meta.post.tpl
under your template--> addons-->my_changes-->hooks-->index folder

and place this code

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


its works so fine.

Now you can call any Icons from there collections.


hope it helps for people around here.

Regards,


I'm trying to use some symbols but doesn't work.

Would be great if you can explain a little more step by step. font Awesome looks nice.
thank you!