質問: よろしくお願いいたします。 現在、レスポンシブ対応のweb画面を製作中です。 現在は某サイトのUIを参考に、ログイン部分を作っています。 参考サイト **テキストエリアの部分に、下記画像のように左端部分にアイコンをつけたいと思っています。** ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fccb67ff264c78dd5e1e42942d7dcd8c.png) **参考サイトを検証ツール(Chromeデベロッパーツール)で調べたり、ソースを見たりしているのですが、** 参考サイト通りのアイコンの付け方がわかりません。 ちなみに**テストアイコンとして、Awesomeアイコンを使っています。** 私が作ったUIは下記です。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/cc248a2deb269a23799a4acb24ad9731.png) テキストエリア部分のコードは以下なのですが、**どのようなHTMLを記述すればよいのか、 またどのようなCSSを指定すれば参考サイトのようなUIを実現できるのかがわかりません。** ``` ``` 実現方法に特に指定はありません。 有職者の皆様、どうぞご教示のほどよろしくお願いいたします。 **ボールドテキスト** サンプルコード等いただけると尚幸いです。 以下、全体のHTMLです。 ``` Inventoies パスワードをお忘れの方はこちら 新規アカウント作成 ```
回答: 追記いただいた参考サイトを見ると、 ``` ``` という構成になっていますね。 CSS(main.css)を見ると `#usrId input` に対して、`padding-left` で左側に余白を作る指定と、背景画像の指定があります。 テキストボックスに背景画像を指定し、実際に文字をかける領域を padding-left でアイコンのサイズ分ずらしたところからにしている、という感じですね。