font-family: entypo; /* BYO icon font, mapped smartly */
speak: none; /* Not to be trusted, but hey. */
font-size: 50px ;
additionally, because you set your icon font size to PX, you aren’t making it scalable. Kinda defeats the purpose of icon fonts. try changing the icon font size to 3em or so. As long as am at it, the span is somewhat superfluous ( except, for the aria-hidden) , but I think however you can hide this element using a media query ‘speech’. Essentially, you should be able to make a style sheet for aural devices, setting everything you don’t want read to hidden.
I am confused abut which HTML you are actually using: MY SIMPLIFIED version, the one from your original post, or if you added something ( you mentioned a P tag, this want your original code).
Hmmmm now i tried to take away the font-face style sheet link, and by doing that the Entypo icons jumps into place…
So what you are saying is that everything looks right as long as Entypo is installed locally? Off the top of my head I dont see anything wrong with your @ font, besides if there was something wrong with the @font then the fonts would work of your local installation, and you would only be ‘surprised’ when the fonts were missing when the page was viewed remotely.
Another thing, unless your HTML is different from what you posted that LAST CSS wont apply.
that is unless you have changed ‘class1’ to ‘entypo’ or ‘entypo-social’
keep in mind that CSS conflicts can be ANYWHERE in any style sheet as well.
//**may not look like conflicting rules but both will apply to the SAME element if your HTML is like this:
<span> i think the first rule meant me</span>
<p class='el'><span>oops </span> too many cooks</p>
And here is how it looks with the font-face.css applied. If i take away the font-face.css file the icons jump to the correct place, BUT the mail icon turns into the standard non-entypo data-icon in Chrome and in Firefox its the other way around, the other icons turns to standard icons while the mail-icon is entypo… hehe
Ok , let’s be clear: in the code I provided, there is no padding being applied to the font via CSS. This leaves the possibility that the font itself has some sort of leading. However, In my test it works fine .
Another issue, of course is that I cant really see your actual content font, . So lets try it this way ( which again is working nearly perfect in my tests) :