How to add new flaticons to my website? - html

Question

I have a website template which uses flaticons. It has a folder with files flaticon.css, flaticon.eot, flaticon.ttf, flaticon.svg, flaticon.woff and some others. I can use the icons by simply importing the CSS into a page and doing something like <i class="flaticon-world-grid">.
Now I want to download some new flaticons and use them on my site. I found some on flaticon.com and it gives me an option to download it in multiple formats. How to "install" these files and edit my CSS so that I can use the new icons like the ones that are already there?
The css file has content like this:
.flaticon-wand2:before {
content: "\e0fb";
}
.flaticon-wealth:before {
content: "\e0fc";
}
.flaticon-website34:before {
content: "\e0fd";
}
.flaticon-world-grid:before {
content: "\e0fe";
}
Which format should I download, where to put the new files, and what to add into the css file to be able to use them?

Answer 1

As mentioned here you can use two or more font-face, with different font-family name.
Like this:
#font-face {
font-family: "Flaticon";
src: url("../fonts/Flaticon.eot");
src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
url("../fonts/Flaticon.woff") format("woff"),
url("../fonts/Flaticon.ttf") format("truetype"),
url("../fonts/Flaticon.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"], [class*=" flaticon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: flaticon !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.flaticon-arrows:before { content: "\f100"; }
.flaticon-back:before { content: "\f101"; }
/**
New Fonts to add
*/
#font-face {
font-family: "Flaticon1";
src: url("../fonts/Flaticon1.eot");
src: url("../fonts/Flaticon1.eot?#iefix") format("embedded-opentype"),
url("../fonts/Flaticon1.woff") format("woff"),
url("../fonts/Flaticon1.ttf") format("truetype"),
url("../fonts/Flaticon1.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "Flaticon1";
src: url(".../fonts/Flaticon1.svg#Flaticon") format("svg");
}
}
[class^="flaticon1-"]:before, [class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after, [class*=" flaticon1-"]:after {
font-family: Flaticon1;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.flaticon1-shapes:before { content: "\f100"; }
.flaticon1-share:before { content: "\f101"; }