[Solved] Help with font icons

[bearhead]

I am trying to use a set of font icons in a project I am working on.

here is what I have for my html:
<span class=”aeicons icon-search”></span>

here is my css:

@font-face {
    font-family: 'aei_icons';
    src:url('http://www.aeieng.com/css/fonts/aei_icons.eot');
    src:url('http://www.aeieng.com/css/fonts/aei_icons.eot?#iefix') format('embedded-opentype'),
        url('http://www.aeieng.com/css/fonts/aei_icons.woff') format('woff'),
        url('http://www.aeieng.com/css/fonts/aei_icons.ttf') format('truetype'),
        url('http://www.aeieng.com/css/fonts/aei_icons.svg#aei_icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.aeicons{
    font-family: 'aei_icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
    content: "\2302";
}
.icon-star:before {
    content: "\2665";
}
.icon-search:before {
    content: "\3d9";
}
.icon-printer:before {
    content: "\1d56";
}
.icon-signal:before {
    content: "\203c";
}
.icon-text:before {
    content: "\2261";
}
.icon-video:before {
    content: "\25d8";
}
.icon-play:before {
    content: "\25ba";
}
.icon-pause:before {
    content: "\2016";
}
.icon-arrow-left:before {
    content: "\2039";
}
.icon-arrow-right:before {
    content: "\203a";
}
.icon-twitter:before {
    content: "\2558";
}
.icon-facebook:before {
    content: "\1d73";
}
.icon-linkedin:before {
    content: "\149";
}

I’ve linked to the icon css file in my html document correctly. I have also made sure that the urls to my fonts are correct. However I cant get the icons to appear on the webpage, nothing is showing up at all, not even the symbols in the default font.

Could anyone help find what is wrong here?

[Paulie_D]

This

<span class=”aeicons icon-search”>`

should be this

<span class="aeicons icon-mail">

The difference is subtle…but it’s the type of quotes you are using…

http://codepen.io/Paulie-D/pen/KCEFt

[bearhead]

omg thank you so much for catching that!
… I don’t know how those weird quotes got in there but I probably would have never noticed it!

[Author]

Posts