How do I use icons from Flaticon in my html?

问题

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?

回答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>

回答2:

Apparently I downloaded file formats, not font files. I was only able to download icons as either Iconfont or SVG sprite after I have put icons in my collection. It downloads the whole collection of course.

回答3:

Just download the icon and put this in the head:

<link rel="icon" href="resources/filename"/>

回答4:

You need to have the flaticon.css file in your server (and the other 5 or 6).

Then check which items are available there.

.flaticon-bath:before { content: "\f122"; }

And then you just use the class.

回答5:

To fix the size...

font-family: Flaticon;
    font-size: 50px;
font-style: normal;
margin-left: 7px;
}

回答6:

This is how you can change the font size, just paste the below code in your css file and that's it.

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 150px;

}

来源：https://stackoverflow.com/questions/43621187/how-do-i-use-icons-from-flaticon-in-my-html

标签

html

css

fonts

icons