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!