How do I use icons from Flaticon in my html?
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>
Admin
Updated on March 12, 2021Comments
-
Admin about 3 years
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?
-
Parvathirajan Natarajan almost 4 yearsDid you try this? flaticon.com/iconfonts