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?
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.
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?
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:
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.