Pablo Malynovytch Pablo Malynovytch - 3 months ago 16
HTML Question

How do I import 2 different files icons?

I would to know how to import a new pack of icons and place in the same css file. I have 2 icon files....flaticon.woff and new.woff and I don't know how to call the new.woff's file without generating error.
How I call the file icon?

@font-face {
font-family: "Flaticon";
url("./Flaticon.woff") format("woff"), src: url("./new.woff") format("woff"), font-weight: normal;
font-style: normal;
}


I put this but the css file only calls the new's file.

and....

.icon-buildings:before { content: "\f100"; }//new.woff file
.icon-add_disabled:before{content: "\f100";color: #d4d4d4;}// overwrites this(flaticons)

Answer

Create two @font-faces, one for each font.

@font-face {  
    font-family: "Flaticon";  
    src: url("./Flaticon.woff") format("woff");
    font-style: normal;
}

@font-face {  
    font-family: "New";  
    src: url("./new.woff") format("woff");
    font-style: normal;
}

Then assign the font when needed, e.g

.icon-buildings:before {
    font-family: "New";
    content: "\f100";
}