Grow your CSS skills. Land your dream job.

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.

*May or may not contain any actual "CSS" or "Tricks".