0
私のウェブサイトにいくつかのアイコンを与えたい。今私は多くの人々がこのウェブサイトFlatironを使用していることがわかります。私が欲しかったアイコンをダウンロードしたが、それはアイコンが表示されませんhtmlでFlaticonのアイコンを使用するにはどうすればよいですか？
/**
* 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-
：
私がやったことは、私のCSSでこのようなものを入れています。
私が間違って何をした：それは、この表示しますか？
おそらく、あなたのプロジェクトにはフォントファイルが正しく含まれていませんでした。コンソールにエラーが表示されますか？あなたのCSSで 'url（）'のために持っているものは、アイコンフォントファイルがCSSファイルと同じフォルダにあることを期待しています。 – hungerstar
@hungerstarそうです、コンソールは、リソース（ERR_FILE_NOT_FOUND）のロードに失敗したと言っています。私は同じフォルダーにアイコンフォントファイルを持っています。それは私がそれを不適切に命名したことを意味しますか？ – Boxman
おそらく。 'url（）'のファイル名があなたのCSSと一致していますか？フォントファイルタイプの1つが欠落している可能性はありますか？ほとんどのブラウザで動作するには、通常、 'tff'、' woff'、 'svg'といった複数の型が必要です。おそらくあなたは1つが欠落しており、それがエラーの場所です。 – hungerstar