Jak wstawić fontello wewnątrz inputa?

pytanie zadane 2 kwietnia 2022 w HTML i CSS przez Piotrek2713 Mądrala (5,340 p.)

Chcę, aby fontello, które jest nad inputami znalazło się w ich wnętrzu. Jak mogę to zrobić?

<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Formularz logowania</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css">
	</head>
	<body>
		<i class="icon-user"></i>
		<form>
			<i class="icon-user-circle"></i><input type="text">
			<i class="icon-key"></i><input type="password">
			<input type="submit" value="Zaloguj się">
		</form>
	</body>
</html>

html
{
	height: 100%;
}
body
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 0;
	background: #555;
}
form
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #999;
	height: 200px;
	width: 200px;
	padding: 20px;
}
input
{
	margin: 5px;
}
i.icon-user
{
	position: absolute;
	font-size: 80px;
	margin-bottom: 21%;
}

1 odpowiedź

odpowiedź 2 kwietnia 2022 przez Wiciorny Ekspert (269,710 p.)
wybrane 2 kwietnia 2022 przez Piotrek2713

Najlepsza

Zobacz sobie tutaj link do fidle, manipulacja odpowiednio css
Generalnie to trzeba otoczyc jakimiś elementem i wypozycjonowanić ikonki na inpucie. Albo znalezienie ikonki w formie obrazka i nadanie inputowi tła.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: #fff;
  color: #000;
  border:1px solid #000;
  border-right:none;
  min-width: 50px;
  text-align: center;
  font-size:20px;
}

.input-field {
  width: 100%;
  font-size:20px;
  padding: 5px;
  outline: none;
  border:1px solid #000;
  border-left:none;
  color:#000;
}
  
  .input-field::placeholder {
    color:#000;
  }

</style>
</head>
<body>
<form action="" style="max-width:500px;margin:auto">
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  </form>
  </body>