fontawesomeをinputのvalueに表示させたい時

fontawesomeのアイコンをformのinputで表示させたい。

通常は以下のように、i要素で指定する。

<a href="/cart.html"><button type="button" class="btn btn-danger"><i class="fas fa-cart-plus"></i>	Add to cart</button></a>

formでは、classにfas、valueに、”&#x” と ”f**;”を入れる。ここでは、cartのアイコンで、f217

<form action="/cart/store" method="POST">
<input type="submit" class="btn btn-danger fas pt-2 pb-2" value="&#xf217; Add to cart">
</form>

使い方はわかったが、inputの中で使うと、bootstrapのfontと異なる表示に見えるな。。まあ良しとしましょう。

login画面でfont awesome

<body>
  	<h1>ZEUS</h1>
    <div id="content">
  	<p>ログイン画面</p>
  	<form action="" method="post" id="form">
      <table>
        <tr>
          <th><label for="login"><i class="fas fa-id-card-alt"></i> ログインID</label></th>
          <td><input type="text" name="login" size="40" placeholder="ログインIDを入力してください"><br>※半角英数字で入力してください</td>
        </tr>
        <tr>
          <th><label for="password"><i class="fas fa-key"></i> パスワード</label></th>
          <td><input type="text" name="password" size="40" placeholder="パスワードを入力してください"></td>
        </tr>
      </table>
  	<p class="sm">ログインID・パスワードをお忘れの方は<a href="">こちら</a><br>
  	   アカウントをお持ちでない方は<a href="">こちら</a></p><br>
       <div class="button_wrapper">
         <button type="submit" value="送信" id="square_btn">ログイン</button>
       </div>
    </form>
    </div>
  	<footer>
  		hpscript
  	</footer>
  </body>

なるほど、思ったより全然いい感じじゃないっすか~パイセン

font-awesomeを使っていこう

font-awesome公式サイト
https://fontawesome.com/

font-awesome getting started
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

integrityがおかしなことになってる。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
	<i class="fas fa-flag"></i>
</body>
</html>

なんじゃこりゃーーーーーーーーーーー