How to Use Icon Fonts?

Get Started
1

I’m embarrassed to ask this because it seems so easy, but I’ve been struggling with this for a long time. I’ve watched Chris Coyier’s video, read countless instructions, but I still am stumped.

I’m trying to use icon fonts, using @font-face.

I add the svg, truetype, woff, and eot files via FTP to a fonts folder in my child theme.

I add the html: <span class=“ca-icon”>A</span>.

I add the FF rule in my CSS:

@font-face {
font-family: ‘WebSymbolsRegular’, cursive;
src: url(‘websymbols-regular-webfont.eot’);
src: url(‘websymbols-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘websymbols-regular-webfont.woff’) format(‘woff’),
url(‘websymbols-regular-webfont.ttf’) format(‘truetype’),
url(‘websymbols-regular-webfont.svg#WebSymbolsRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I add the CSS:

.ca-icon{ font-family: ‘WebSymbolsRegular’, cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;

And what I end up with is a big ‘A’ where the symbol should be.
I’ve tried different paths, with quotes, without, you name it, and I’ve tried a variation of it, and I can’t figure out what I’m missing.

If anyone can help me with this, I will be so eternally grateful. I’m going crazy!

2

OK, here’s another example. I thought I had it licked tonight, but my results were typical: I ended up with a vertical display of: ^ * .
which, of course are supposed to be an rss, star and shopping cart icons.

I’m going by the following simple instructions which seem clear, but obviously I’m too dumb to figure this out:

Go to Font Squirrel and download the @font-face kit. Unzip it, rename it to ‘fonts’, and put it in the same directory as your html file.
Use this as your html file:
<!DOCTYPE html>

<html><head> <meta charset=“utf-8”> <style> @font-face { font-family: ‘ModernPictogramsNormal’; src: [COLOR=#00008B]url/COLOR; src: [COLOR=#00008B]url/COLOR format(‘embedded-opentype’), [COLOR=#00008B]url/COLOR format(‘woff’), [COLOR=#00008B]url/COLOR format(‘truetype’), [COLOR=#00008B]url/COLOR format(‘svg’); font-weight: normal; font-style: normal; } li { list-style-type: none; } [data-icon]:before { font-family: ‘ModernPictogramsNormal’; content: attr(data-icon); speak: none; padding:0 5px; } </style></head><body> <ul> <li data-icon=“^”>RSS</li> <li data-icon=“*”>Star</li> <li data-icon=“.”>Shopping Cart</li> </ul></body> </html>

I created a folder under the main theme file (in this case Twenty-Twelve) and named it fonts. it contains the font files I dl’d from FontSquirrel and unzipped. I placed the content bewteen the <style></style> tags in the style.ccs folder. I created a post in WP with the html. And somewhere there’s a disconnect.