input text の中にロゴを入れたい

環境：Mac
ブラウザ：Chrome
エディタ：Atom
bootstrapバージョン：4.3.1
fontawesomeバージョン：5.8.1

このようにするやり方を教えてください。
模写参考サイト：https://www.airbnb.jp/gift

ちなみにこのデベロッパーツールを見ても理解できません。

それから、検索機能自体は機能しなくてOKです。
positionを使っても中のプレイスホルダーと被って上手くいきません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" href="responsive.css">
10    <link rel="icon" href="img/airbnb_logo.ico">
11    <title>現地の人から借りる家、体験&スポット - Airbnb</title>
12  </head>
13  <body>
14
15
16
17<header>
18  <div class="header-left">
19      <a href="#"><img src="img/airbnb_logo.png"></a>
20      <i class="fas fa-search"></i>
21      <input type="text"  placeholder="探す">
22  </div>
23  <div class="header-right">
24    <ul >
25      <li><a href="#">ホストをはじめる</a></li>
26      <li><a href="#">ヘルプ</a></li>
27      <li><a href="#">登録する</a></li>
28      <li><a href="#">ログイン</a></li>
29    </ul>
30  </div>
31</header>
32
33
34
35
36
37
38
39    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
40    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
41    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
42  </body>
43</html>
44

css
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
8}
9
10a {
11  text-decoration: none;
12}
13/* ----------↑上記は基本編集しない------------- */
14header{
15  padding:  20px 20px 20px 30px;
16  height: 80px;
17
18}
19.header-left{
20  float:left;
21}
22
23.header-left img{
24  width: 30px;
25  height: 30px;
26}
27.header-left i{
28  position: absolute;
29  top:35px;
30  left: 90px;
31}
32.header-left input{
33  margin-left: 20px;
34  width:420px;
35  height: 50px;
36}
37
38.header-right {
39  float: right;
40  margin-top: 10px;
41}
42.header-right li{
43  display: inline-block;
44  padding: 0 15px;
45}
46.header-right a{
47    color: #444444;
48    font-weight: bold;
49    font-size: 13px;
50    text-decoration: none;
51    padding-bottom: 28px;
52}
53
54.header-right a:hover{
55  border-bottom: 2px solid #444444;
56}
57

以上、よろしくお願いします。

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

回答2件

ただのSVG
開発ツールで見てみ

投稿2019/03/23 13:53

退会済みユーザー

総合スコア0

退会済みユーザー

2019/03/23 13:58

それ見てわからないから質問したのだが

退会済みユーザー

2019/03/23 14:17

あぁ。日本語がおかしいのね＾＾；虫眼鏡が知りたいのか。理解しました。それ、普通はアイコンって言います。

退会済みユーザー

2019/03/23 14:19

回答は変わらんけど。

退会済みユーザー

2019/03/23 14:46

あぁ、私の日本語がおかしかったのね。誤：ロゴ正：アイコンってことかな。「普通」という事はどこかに定義でもされているのでしょうか？虫眼鏡をロゴと言っても、アイコンと言ってもわかる人なら、ニュアンスで伝わるかと存じますが。

退会済みユーザー

2019/03/23 14:47

bootstrap のマニュアル見てみ

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

ベストアンサー

構造を見ればわかりますが、「input text の中に」はロゴが入っていません。

追記：

CSS
1input {
2  -webkit-appearance: none;
3  -moz-appearance: none;
4  appearance: none;
5  border: 0 none;
6  margin-left: .5em;
7}
8
9div {
10  border: 1px solid #999;
11  display: inline-block;
12  padding: .5em;
13}
14```**動くサンプル：**[https://jsfiddle.net/gr9w1cq2/1/](https://jsfiddle.net/gr9w1cq2/1/)