如何在我的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

---

你可能没有在项目中正确地包含字体文件。您是否在控制台中看到了错误？CSS 中 url() 所引用的内容需要将图标字体文件放在与 CSS 文件相同的文件夹中。 - hungerstar

@hungerstar 我正在下载 SVG 文件，可选择的其他格式有 PNG、EPS、PSD 和 </>Base64。如果我想要获取 TTF 和 WOFF 文件，我需要进行转换吗？还是这是一种不同的文件格式？ - Boxman

@hungerstar 嘿，我解决了这个问题。显然，你必须将图标放入你的集合中才能以Iconfont或SVG sprite的形式下载它们。很奇怪他们没有提供相关指南或教程。还有一件事我想问。这些图标显示的尺寸比我想要的小。我该如何使它们变大（例如与它们所在的div的尺寸相同）？ - Boxman

很奇怪。很高兴你解决了它。即使你在回答自己的问题，你可能想把它作为一个答案添加进去。其他人可能会遇到与Flaticon类似的问题。 - hungerstar

你实际上需要回答你的问题。然后你可以标记它为已接受（可能需要等待X一段时间）。至于大小，那是另一个问题。 - hungerstar

Answer 1

1. 准备您的图标集

为您的网站添加单色图标到图标集中。

2. 下载 Iconfont

打开您的图标集并点击“下载图标集”按钮，然后选择 Iconfont。

3. 准备您的图标集

将源文件和 CSS 文件复制到您的网页目录中。

4. 加载样式表

从网页头部请求 CSS 样式表。

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

5. 使用类

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

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

- Shahroze Ali

Answer 2

显然我下载的是文件格式，而不是字体文件。只有在将图标放入我的收藏夹后，我才能将图标下载为Iconfont或SVG sprite。当然，它会下载整个收藏。

- Boxman

---

你试过这个吗？https://www.flaticon.com/iconfonts - Parvathirajan Natarajan

Answer 3

只需下载图标并将其放在头部：

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

- Jelle

Answer 4

您需要在服务器上拥有flaticon.css文件（以及其他5或6个文件）。

然后检查哪些项目可用。

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

然后您只需使用该类即可。

- user2060451

Answer 5

为了调整大小...

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

- Bea Lemm

Answer 6

这是如何更改字体大小的方法，只需将下面的代码粘贴到您的CSS文件中即可。

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

font-size: 150px;

}

- Shaan