The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Using my own Font for Icon Class

  • # February 13, 2013 at 3:13 pm

    I have already created my own font face and incorportated it into css.
    @font-face {
    font-family: “Font1”;
    src: url(‘../Icon Images/starz.svg’) format(‘svg’), url(‘../Icon Images/starz.eot’) format(‘eot’), url(‘../Icon Images/starz.woff’) format(‘woff’), url(‘../Icon Images/starz.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;

    I was wondering what the exact syntax I need to use to incorporate this into an icon class?
    if I want the icon to be called .icon-starz, what exactly do I need to do?

    # February 13, 2013 at 3:44 pm

    If you have the rule defined linking up the sources, you just use it in whatever selectors you want based on the name you gave it, eg:

    .icon-starz {
    font-family: “Font1”, Helvetica, Serif /* always include fallback for non-supporting browsers */

    In there, you can also set other font attributes in the usual manner. On a side note, I would really recommend using a more descriptive name than font1 as, if you end up with lots of declarations, it might get confusing to work out which is which.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed