What am i missing?

[grimreaper0]

Keep in mind I'm new to Angular. I get a square box when trying to implement this, but I'm able to view using the same process with font-awesome.

I've added all 5 files into the fonts folder. I've tried using both the css file and min.css file with no luck. The first one "Test" works, the second one "Test 2" does not. The only change I did was go into the weather-icons.css and weather-icons.min.css and change the url from ../font to ../fonts.

Any help would be appreciated.

Here is my code:

function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-ban"></i> Test'
                }
            }
        }, {
            url: '/',
            config: {
                title: 'admin',
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="wi wi-night-alt-showers"></i> Test 2'
                }
            }
        }
    ];
}

[erikflowers]

The HTML part is correct, but I'd have to inspect it in Chrome to see. If you inspect the font it should have these attributes on the wi class and then the icon class

and

If those aren't there, it means the CSS isn't pointing to the fonts correctly and you just have to figure out the pathing. If they are there, then it means the actual font files aren't being referenced correctly and the pathing needs to be looked at.

So it's one of those. The CSS looks for a font director on the same level as the CSS directory, so it is a ../ reference. Go to the inspector and see which of the cases above is happening and come back and tell me.

[grimreaper0]

I rearranged the css files and that did the trick. I initially had it at the bottom of the styles. I'm guessing it was conflicting with another stylesheet. Using the inspector and knowing what to look for helped. Thanks!

<link href="content/ie10mobile.css" rel="stylesheet" />
<link href="content/bootstrap.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/weather-icons.css" rel="stylesheet" />
<link href="content/toastr.css" rel="stylesheet" />
<link href="content/customtheme.css" rel="stylesheet">
<link href="content/styles.css" rel="stylesheet" />

[erikflowers]

That is very strange, the weather icons should be totally namespaced (including font awesome) away from anything else and require no dependencies. Were the styles just not there at all, or being overwritten? Would be interesting to know.