How can I shove the icon with the Fontawesome into a pseudo-class. Code example:

<form> <input type='text' name='name' value='' placeholder='Имя'> <input type='text' name='tel' value='' placeholder='Телефон'> <textarea name='message' placeholder='содержание'></textarea> <input type='submit' name='send' value='Отправить'> </form>

I want to apply it to input.

  • I answered this question, the author does not accept the answer and does not comment at all, so I put a minus question. - Alexander Kazakov

1 answer 1

As far as I know, do not add to standard input methods.
Use a wrapper.
If there are better solutions, I will be glad to know.

 body { text-align: center; background-color: #EFF1F5; } label.wrapper_input { display: block; } label.wrapper_input:after { font-family: fontawesome; font-size: 18px; position: relative; right: 24px; color: deepskyblue; } label.wrapper_input.input_name:after { content: '\f007'; } label.wrapper_input.input_phone:after { content: '\f095 '; } label.wrapper_input_submit:after { font-family: fontawesome; content: '\f105'; font-size: 15px; position: relative; right: 17px; color: #fff; } input[type="submit"] { background-color: deepskyblue; color: #fff; border-radius: 5px; padding: 10px 20px 10px 10px; margin-top: 10px; font-weight: 600; } input[type="text"] { background-color: #fff; border-radius: 5px; padding: 10px 30px 10px 10px; margin-top: 5px; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <form action="#"> <label class="wrapper_input input_name"> <input type='text' name='name' value='' placeholder='Имя'> </label> <label class="wrapper_input input_phone"> <input type='text' name='tel' value='' placeholder='Телефон'> </label> <label class="wrapper_input_submit"> <input type="submit" /> </label> </form>

  • one
    I think it would be better to use the label , and at the same time it would be useful - webDev_
  • Replaced with label . How do you think now? - Alexander Kazakov