SNSリンクアイコンをフッターに入れたいのですが、上手くアイコン表示出来ず困っています。

Question

Facebook, Twitter, Instagram等のSNSリンクアイコンをフッターに入れたいのですが、上手くアイコン表示出来ずにいます。

ここに質問の内容を詳しく書いてください。
Airbnbの模写中であり、SNSリンクアイコンをフッターへ入れようとしており、リンク先へは飛ぶもののアイコンが表示されずに困っております。
アイコンダウンロード元は下記のicomoon、上記3つのSNSアイコンを表示しようとしております。
https://icomoon.io/app/#/select/font
どのようにすれば解決できるのでしょうか。

下記が現状の画像です。

エラーメッセージ
白い四角のみが表示されます。

### 該当のソースコード
**HTML**
	<footer>
		<link rel="stylesheet" href="/icomoon/style.css">
		<ul>
			<a href="https://facebook.com" target="_blank">
				<li><span class="icon-facebook"></span></li>
			</a>
			<a href="https://twitter.com" target="_blank">
				<li><span class="icon-twitter"></span></li>
			</a>
			<a href="https://instagram.com" target="_blank">
				<li><span class="icon-instagram"></span></li>
			</a>
		</ul>
		<p>&copy 2019 Airbnb,Inc.All rights reserved.</p>
	</footer>


**CSS**
.icon-facebook:before {
  content: "\ea91";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-instagram:before {
  content: "\ea92";
}


```ここに言語名を入力!![イメージ説明](7de340922847db049ed62f17f52e6430.png)![イメージ説明](bd85d4b66eeb2f4f4740a7060ec15f5f.png)
ソースコード

試したこと

下記サイト等を参考にし、改善しようとしておりますが、今のところ表示されないままです。
https://mndangler.net/2017/04/webicon_icomoon_and_font-awesome/

補足情報（FW/ツールのバージョンなど）

アドバイスをいただければ幸いです。

Comments

[azuapricot]

コンソールで何かエラーが出ているようですが

[m.ts10806]

コードを画像で提示されても試せませんので質問本文にマークダウンでご提示ください

[m.ts10806]

できればコードブロックはファイル毎にわけていただけると。
コピペでそのまま実行するので、ファイルに関係のない情報とか、全て１つのブロックにおさまっていると正しく再現確認できませんので。

[m.ts10806]

コンソールのエラーもご提示ください。

[1031vagabond]

プログラミング初心者であり質問の仕方や提示の仕方が悪く、大変お手数お掛けしております。追加情報も追記しますので、少々お待ち下さい。

[1031vagabond]

mts10806さん
大変恐縮ながら、下記はHTMLとCSSのファイルを分けて、全てのコードを記載するということでしょうか。
”できればコードブロックはファイル毎にわけていただけると。
コピペでそのまま実行するので、ファイルに関係のない情報とか、全て１つのブロックにおさまっていると正しく再現確認できませんので。”
どのように提示すべきかもよく分かっておらず、ご教授いただければ非常に有り難いです。

[1031vagabond]

確かにコンソールで下記のエラーが挙がっておりました。
"Failed to load resource: net::ERR_FILE_NOT_FOUND"
https://icomoon.io/app/#/select/fontのサイトからダウンロード・解凍し、HTMLとCSSを入れたファイルに入れてはいるのですが、なぜ”ファイルが無い”と表示されるのか、もしも思い当たる点があればお教えいただければ有り難いです。

[m.ts10806]

コードブロックの分け方、回答に追記しました。
追記前の回答に読まれない理由も書いています。

Answer 1

/icomoon/style.css

これが404（指定した場所にファイルがない）ということになっています。

/で始まるとルート(Windowsなら大抵Cからの)からの絶対パスになるので注意です。
ローカルPC上で動かしているうちはそのファイルからの相対パスにしておいたほうが良いでしょう。

---

コードブロックの分け方：

    <footer>
        <link rel="stylesheet" href="/icomoon/style.css">
        <ul>
            <a href="https://facebook.com" target="_blank">
                <li><span class="icon-facebook"></span></li>
            </a>
            <a href="https://twitter.com" target="_blank">
                <li><span class="icon-twitter"></span></li>
            </a>
            <a href="https://instagram.com" target="_blank">
                <li><span class="icon-instagram"></span></li>
            </a>
        </ul>
        <p>&copy 2019 Airbnb,Inc.All rights reserved.</p>
    </footer>

.icon-facebook:before {
  content: "\ea91";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-instagram:before {
  content: "\ea92";
}

Comments

[miyabi_pudding]

/スタートのパスは、正しくは"ルートパス"です！
絶対パスは、httpか、//スタートの方ですね
細かく横槍すみません　汗

[m.ts10806]

少し表現修正しました

[miyabi_pudding]

ありがとうございます！
余計な口出し申し訳ないです 汗

[m.ts10806]

いえ、そこは正しい表現で伝えないと間違えて覚えて使うと困るのは質問者さんですからね

[1031vagabond]

お二方ともアドバイスをありがとうございます。
特にmts10806さん、細やかに教えていただきありがとうございます。
/によりルートパスになってしまっているため、/を除去して相対パスにするということですね？
【誤】
<footer>
<link rel="stylesheet" href="/icomoon/style.css">

【正】
<footer>
<link rel="stylesheet" href="icomoon/style.css">
のような形でしょうか。
現時点で既に非常に丁寧にお教えていただいていることは分かっており、
現状試行錯誤しているところですが、残念ながらまだ成功には至っていません。
明日もっと粘ってトライするので、この結果を必ずこちらで報告するようします。

[mepon]

絶対パスと相対パスについて勉強された方がよいかと。
htmlから見てicomoonフォルダがどこにあるかによって相対パスは変わります。
提示されているhtmlとicomoonフォルダが同じ階層にあるのであればそれであってます

[m.ts10806]

「相対パス」は/を除去したらいいという意味ではないです。
「linkの指定をhtmlファイルから見た位置にしましょう」ということです。あと「cssが読み込めていない」のか「cssの指定が間違っている(文法問題)」のか問題の切り分けも必要です。
例えばbodyに背景色をつけるなどして分かりやすい指定を入れて問題の切り分けを行ってください。

[think49]

> 絶対パスは、httpか、//スタートの方ですね
更に横槍ですが、ソースを頂けると有難く。
https://teratail.com/questions/17299

[miyabi_pudding]

think49さん>これです。
https://fastcoding.jp/blog/all/frontend/path/
すみません、どうやら、間違っていたようですね。
mts10806さん、質問者さん、申し訳ないです。

[1031vagabond]

皆さん、ご指導いただきありがとうございます！
皆さんのおかげでアイコンが表示される様になりました。

今回、下記の点を変更したところ表示されるようになりました。
１．相対パスへの変更
２．icomoonフォルダを圧縮フォルダ→通常フォルダへ変更

１のみでは表示されなかったので、２も同時に試してみました。
ダウンロード時は圧縮フォルダ状態だったので、良い方法なのかどうかは分からないのですが、
２を変更することによりサイトが重くなりすぎるということも起こりうるものなのでしょうか。

[m.ts10806]

さすがに圧縮のままではフォルダではなくファイルなので正常に読み取れないと思います・・・。

[think49]

@miyabi_takatsuk さん
個人サイトでしたか。
多くの個人サイトで同様の誤りがあるので、その誤解をされている方は少なくないと思います。

ちなみに、「// で始まるURL」をURL Standard では "scheme-relative-special-URL string" と表現しています。
日本語で「スキーム相対特殊URL」と表現している文献は見たことがありませんが、「相対URL」の一種と覚えておけば、間違いはないかと思います。
https://url.spec.whatwg.org/#url-writing

@1031vagabondさん
mts10806さんの指摘に補足ですが、Windows OSの「圧縮フォルダ」の実体は「zipファイル」になります。
アップロードされたファイルをFTP/SSH等で確認すれば、分かります。
なお、Windows OSはデフォルトで拡張子を表示しない設定になっているので、「圧縮フォルダ」をフォルダと誤解いているケースは多々あります。
可能なら、拡張子を表示する設定にすることをお勧めします。
https://support.microsoft.com/ja-jp/help/978449

[1031vagabond]

@mts10806さん
圧縮はファイルだったのですね。。かなり初歩的な点で躓いていたようですが、一つ学ばせていただきました。
数日間困っていたので、お教えいただいていなければ途中で投げ出していたかもしれません。Tera Tailを初めて利用したのですが、色々と丁寧にお教えいただきありがとうございました！

＠think49さん
早速お教えいただいた方法でオススメ拡張子を表示する設定に変更しておきました。
確かにこれであればどういったファイルなのかひと目で分かり良さそうですね。
ありがとうございます！

[m.ts10806]

解決につながったようで何よりです。

[miyabi_pudding]

think49さん>ご指摘、本当にありがとうございました。
プロとして、個人サイトの情報をすぐに鵜呑みしていたのは、恥ずかしい限りです。
公式ドキュメントを見るの癖づけるようにします。

Answer 2

考えられる原因：パスの記述ミス

これ以上は詳しく書いて頂かないことにはなんとも言えません。