How do I use icons from Flaticon in my html?

Question

I want to give my website some icons. Now I see that many people use this website Flaticon.

What I have done is put something like this in my CSS:

/**    
 * Font 1    
 */    
@font-face {
  font-family: "Flaticon1";
  src: url("flaticon1.eot");
  src: url("flaticon1.eot#iefix") format("embedded-opentype"), url("flaticon1.woff") format("woff"), url("flaticon1.ttf") format("truetype"), url("flaticon1.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon1-"]:before,
[class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after,
[class*=" flaticon1-"]:after {
  font-family: "Flaticon1";
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon1-basic21:before {
  content: "\e000";
}

.flaticon1-bicycle21:before {
  content: "\e001";
}

.flaticon1-car6:before {
  content: "\e002";
}


/**    
 * Font 2    
 */    
@font-face {
  font-family: "Flaticon2";
  src: url("flaticon2.eot");
  src: url("flaticon2.eot#iefix") format("embedded-opentype"), url("flaticon2.woff") format("woff"), url("flaticon2.ttf") format("truetype"), url("flaticon2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon2-"]:before,
[class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after,
[class*=" flaticon2-"]:after {
  font-family: "Flaticon2";
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon2-basic21:before {
  content: "\e000";
}

.flaticon2-bicycle21:before {
  content: "\e001";
}

.flaticon2-car6:before {
  content: "\e002";
}

http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont-

I downloaded the wanted icon but it doesn't display the icon. It displays this:

What have I done wrong?

Answer 1

1. Prepare your collection

Add monocolor icons to the collection for your website

2. Download iconfont

Open your collection and press the Download collection button, then select Iconfont

3. Prepare your collection

Copy the source files and CSS to your web folder.

4. Load the stylesheet

Request the CSS stylesheet from the head of your web.

< link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css" >

5. Use the classes

Use the classes of each icon and they will appear on your website. After, manipulate them with CSS. Use example:

<i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>