Stylesheet parsing in ExpressionEngine - font Icons not displaying

I have just started learning EE. I have run into an issue. I have linked stylesheets as follows (pardon the awful formatting, I am having a hard time with markdown:

```<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='stylesheets/icons'}" />
 <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='stylesheets/template-style'}" />
```

The stylesheets are in a template group called stylesheets.group. I have another directory called fonts.group which is at the same level as the stylesheets group.

“`default_site

       stylesheets.group

       fonts.group
   ```

In the fonts folder are icon fonts. In the icon.css I have the following code

@font-face {
   font-family: 'mfg';
     src: url('../font/mfglabsiconset-webfont.eot');
     src: url('../font/mfglabsiconset-webfont.svg#mfg_labs_iconsetregular') format('svg'),
           url('../font/mfglabsiconset-webfont.eot?#iefix') format('embedded-opentype'),
          url('../font/mfglabsiconset-webfont.woff') format('woff'),
          url('../font/mfglabsiconset-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

icon-facebook_circle
.icon-cloud,
.icon-at,
.icon-plus,
.icon-minus,
.icon-arrow_up,
.icon-arrow_down,
.icon-arrow_right,
.icon-arrow_left,
.icon-chevron_down,
.icon-chevron_up,
.icon-chevron_right,
.icon-chevron_left,
.icon-reorder,
.icon-list,

In my html template, index.html, where the icon is supposed to display, I have the line:

<a href="/"><i class="icon-facebook_circle icon2x text-white"></i></a>

This set-up works in all my other web projects where I build using Silverstripe or Codeigniter of in just plain html but in EE icons do not display, just square boxes.

I am wondering if the icons.css file is unable to full the icon fonts from the fonts folder. I tried changing the line:

src: url('../font/mfglabsiconset-webfont.eot'); <pre><code>to</code></pre>src: url('../font.group/mfglabsiconset-webfont.eot'); <pre><code>same problem. I even put the icons in the stylesheets folder and changed the url to</code></pre>src: url('mfglabsiconset-webfont.eot'); It looks like the icon.css file cannot just make use of the icons and I wonder if it has anything to do with the way EE parses stylesheets and other templates. I will appreciate any help.

What am I doing wrong?