Question

So i want to create some icon and therefor the following (striped) css

.css_circle {
    background: #8a8f97;
    border: 0px none transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    behavior: url(../js/PIE.htc);

    text-align: center;
    text-decoration: inherit;
    color: #FFF;
}

.genic {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    font-family: 'Genericons';
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    vertical-align: middle;
}
.genic-1_5x {
    font-size: 1.5555555555555555em;
}
.genic-fb:before {
    content: '\f204';
}
.boxshadow {
    position: relative;
    -webkit-box-shadow: #000 2px 3px 0px;
    -moz-box-shadow: #000 2px 3px 0px;
    box-shadow: #000 2px 3px 0px;
}

and code

<div class="footer_contact">
    <ul>


        <?php if( vp_option('facebook') != ''){ ?>
        <li><a href="<?php echo vp_option('facebook'); ?>" target="_blank" class="footer_contact_fb" title="Visit on Facebook"><i class="css_circle genic genic-1_5x genic-fb boxshadow"></i></a></li>
        <?php } ?>

    </ul>
</div>

Now this works in chrome f.e. but not in ie. I think it must be some problem with the file (format or code) as i am testing with "Font Awesome" too and besides the circle ie doesn't show the genericon but an Font Awesome icon that's style is defined in another css.

So i copied all in a new file and deleted the old one to prevent file-format problems and took a look at the code with notepad++ and ran checks with expression web 4, yet i can't find anything ie shouldn't be able to handle.

Was it helpful?

Solution

Ok i finally got it - took a deeper look with notepad++, compared genericon with font-awesome and found out that there are differences in "@font-face" - for some reason on half of the sources the values and not commands have been marked bold meaning:

src: url('../font/genericons-webfont.eot?#iefix') format('embedded-opentype'), url('../font/genericons-webfont.woff') format('woff'),

I couldn't find the real source for that - the code itself was ok, just ... i.d.k. Anyway i copied over the clean part from font awesome (, fixed the link,) and it's working now. Still if anyone got an idea how this could have been possible, i'd like to learn on.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top