如何在我的 html 中使用来自 Flaticon 的图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43621187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use icons from Flaticon in my html?
提问by Boxman
I want to give my website some icons. Now I see that many people use this website Flaticon.
我想给我的网站一些图标。现在我看到很多人都在使用这个网站 Flaticon。
What I have done is put something like this in my CSS:
我所做的是在我的 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-
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?
我做错了什么？
回答by Shahroze Ali
1. Prepare your collection
1. 准备您的收藏
Add monocolor icons to the collection for your website
将单色图标添加到您网站的集合中
2. Download iconfont
2.下载iconfont
Open your collection and press the Download collection button, then select Iconfont
打开您的收藏并按下载收藏按钮，然后选择 Iconfont
3. Prepare your collection
3. 准备您的收藏
Copy the source files and CSS to your web folder.
将源文件和 CSS 复制到您的 Web 文件夹。
4. Load the stylesheet
4.加载样式表
Request the CSS stylesheet from the head of your web.
从您的网站负责人请求 CSS 样式表。
< link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css" >
5. Use the classes
5. 使用类
Use the classesof each icon and they will appear on your website. After, manipulate them with CSS.
Use example:
使用classes每个图标的 ，它们将出现在您的网站上。之后，用 操纵它们CSS。使用示例：
<i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
回答by Boxman
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.
显然我下载了文件格式，而不是字体文件。在我将图标放入我的收藏后，我只能将图标下载为 Iconfont 或 SVG sprite。它当然会下载整个集合。
回答by Jelle
Just download the icon and put this in the head: <link rel="icon" href="resources/filename"/>
只需下载图标并将其放在头部： <link rel="icon" href="resources/filename"/>
回答by user2060451
You need to have the flaticon.css file in your server (and the other 5 or 6).
您的服务器中需要有 flaticon.css 文件（以及其他 5 个或 6 个）。
Then check which items are available there.
然后检查那里有哪些项目可用。
.flaticon-bath:before { content: "\f122"; }
.flaticon-bath:before { content: "\f122"; }
And then you just use the class.
然后你只需要使用这个类。
回答by Bea Lemm
To fix the size...
要固定大小...
font-family: Flaticon;
font-size: 50px;
font-style: normal;
margin-left: 7px;
}
