SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member WebYip's Avatar
    Join Date
    Oct 2012
    0 Post(s)
    0 Thread(s)

    Question How to Use Icon Fonts?

    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. #2
    SitePoint Member WebYip's Avatar
    Join Date
    Oct 2012
    0 Post(s)
    0 Thread(s)
    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: url('fonts/modernpics-webfont.eot'); src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/modernpics-webfont.woff') format('woff'), url('fonts/modernpics-webfont.ttf') format('truetype'), url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') 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.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts