Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  bearhead 5 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #172081

    bearhead
    Participant

    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?

    #172086

    Paulie_D
    Moderator

    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

    #172088

    bearhead
    Participant

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star