投稿フォームの送信ボタンにfont-awesomeを使用したいです。

投稿フォームなのですが、こちらのエスケープはどうすればいいでしょうか？

html
1<?php $form = '
2<form method="get" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
3    <input type="text" placeholder="search" value="" name="s" class="s">
4    <input type="submit" class="searchsubmit" value="<i class="fa fa-search" aria-hidden="true"></i>">
5</form>';
6echo $form; ?>

最後の
<input type="submit" class="searchsubmit" value="<i class="fa fa-search" aria-hidden="true"></i>">に悩んでいます。

ソースですと下記のように表示されます。

html
1<form method="get" class="searchform" action="http://127.0.0.1:4001/wordpress/">
2    <input type="text" placeholder="search" value="" name="s" class="s">
3    <input type="submit" class="searchsubmit" value="<i class='fa fa-search' aria-hidden='true'></i>">
4</form>

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

回答1件

ベストアンサー

input要素のfont-familyプロパティにFontAwesomeを指定し、value属性に表示したいアイコンフォントの文字コードを入力すれば実現できます。また、アイコンフォントの文字コードはFont Awesome Cheatsheetで確認することができます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7    <style type="text/css">
8        input[type=submit] {
9            font-family: FontAwesome, sans-serif;
10        }
11    </style>
12</head>
13<body>
14<form method="get" class="searchform" action="">
15    <input type="text" placeholder="search" value="" name="s" class="s">
16    <input type="submit" class="searchsubmit" value="&#xf002;">
17</form>
18</body>
19</html>