我希望为我的网站添加一些图标。现在我看到很多人使用这个网站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-
我下载了想要的图标,但它没有显示出来,只显示了这个:
我做错了什么?
url()
所引用的内容需要将图标字体文件放在与 CSS 文件相同的文件夹中。 - hungerstar