如何在我的 html 中使用 Flaticon 中的图标？

Question

我想给我的网站一些图标。现在我看到很多人使用这个网站 Flaticon。

我所做的是在我的 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-

我下载了想要的图标，但它不显示图标。它显示这个：

我做错了什么？

原文由 Boxman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 准备你的收藏

将单色图标添加到您网站的集合中

2.下载图标字体

打开您的收藏并按下载收藏按钮，然后选择 Iconfont

3. 准备你的收藏

将源文件和 CSS 复制到您的 Web 文件夹。

4.加载样式表

从您的网站头部请求 CSS 样式表。

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

5.使用类

使用每个图标的 classes ，它们将出现在您的网站上。之后，使用 CSS 操作它们。使用示例：

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

原文由 Shahroze Ali 发布，翻译遵循 CC BY-SA 3.0 许可协议