html如何太假icon图标,如何在我的html中使用Flaticon中的图标？

我想给我的网站一些图标。现在我看到很多人使用这个网站Flaticon。如何在我的html中使用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";

}

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

我做了什么错？

2017-04-25

Boxman

+0

您可能没有在您的项目中正确包含字体文件。你在控制台中看到错误吗？你对CSS中的url()有什么期望，图标字体文件与CSS文件位于同一个文件夹中。 –

+0

@hungerstar你说得对，控制台说的是它无法加载资源(ERR_FILE_NOT_FOUND)。我确实有图标字体文件在同一个文件夹中。这是否意味着我将其命名不当？ –

+0

可能。 'url()'中的文件名是否与你的CSS匹配？你是否可能缺少一种字体文件类型？您通常需要有多种类型，即'tff'，'woff'，'svg'，才能与大多数浏览器一起使用。也许你错过了一个，那就是错误所在。 –