fontawesomeのアイコンが表示できない

前提・実現したいこと

fontawesomeのアイコンが表示できない。

発生している問題・エラーメッセージ

現在、チェックマークが表示されるところに



が表示される。

該当のソースコード

{% load static %}
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>INDEX</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'app/index.css' %}">
</head>
<body>

<form  action="" method="POST">
　{% csrf_token %}
　{{ form }}
  <div>
   <input type="submit" id="check" class="font-awesome" value="&#xf00c;">
  </div>
</form>

</body>
</html>

とhtmlに書き、

input[type=submit]{
 font-family: FontAwesome
}

とcssに書いた。
GoogleChromeの検証を開くと、valueのところにが入っているのがわかった。
文字化けが原因かもしれないが、どのように直せば良いか？

参考URL:https://www.webantena.net/css/input-type-submit-font-family-fontawesome/

maisumakun

2018/05/29 04:14

Font Awesomeの読み込みコードは、どのように書いていますか？

m.ts10806

2018/05/29 04:18

実装するための手順は何を参考にしましたか？

kaitotokai

2018/05/29 04:33

情報を追加しました。もしわかったらお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

読み込まれるCSSファイルを確認したところ、font-familyはブランドアイコンが「 Font Awesome\ 5 Brands」、solidとregularが「Font Awesome\ 5 Free」（両者の違いはウェイトで表現）となっています。それらの名前を使いましょう。

…というより、ボタンに入れるのであれば、<button>の中に<i class="fas ***"></i>のように書いたほうがいいのではないか、とも思います。

投稿2018/05/29 04:46

maisumakun

総合スコア145183

maisumakun

2018/05/29 04:47

参考にされたWebサイトは、Font Awesome 4時代のもののようです。

dit.

2018/05/29 05:04

このまま使用するなら`<input type="submit" id="check" class="fa" value="">`(classをfaに)で行けそうですが、ボタンとしての役割ならmaisumakunさんが指摘のように`<button><i class="fa"></i></button>`とか`<button><i class="fa fa-check"></i></button>`の方がよさそうな気がします。

kaitotokai

2018/05/29 06:13

ありがとうございます。<button>の中に<i class="fas ***"></i>のように書いたほうがいいのではないか、とありますが、その場合もcssには同様に「 Font Awesome\ 5 Brands」　と書くということでしょうか？

maisumakun

2018/05/29 06:32

<i>で書く場合は、デフォルトのCSSが賄ってくれますので、自分でさらにCSSを書く必要はありません。