Hello everyone, welcome back at porkaone. On this occasion we will learn how to
insert an icon into an input form. Curious?, let's follow the steps below.
How to Insert Icons into HTML Input Forms with CSS Like on Android
1. Create a new html document. Then follow the script as shown below.
The script below is quite simple. We just create a plain text input form that
already uses bootstrap and uses bootstrap icon. Please run the results to see
the initial appearance before styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container mt-4">
<div class="inner-addon left-addon">
<i class="bi bi-people"></i>
<input type="text" class="form-control" placeholder="Type Something..."/>
</div>
</div>
</body>
</html>
2. In the next step we need to add a css style to make the
icon inside the form. Follow the script as shown below. Then add above the
</head>. tag
<style>
.inner-addon {
position: relative;
}
.inner-addon .bi {
position: absolute;
padding: 10px;
pointer-events: none;
}
.left-addon .bi {
left: 0px;
}
.left-addon input {
padding-left: 30px;
}
</style>
Please see the results and feel the difference before and after adding the
css code.
|
Final Result
|
The application method is quite easy, it can be used in various other types
of input forms. You can also use other types of icons according to your
needs.
FULL SCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<style>
.inner-addon {
position: relative;
}
.inner-addon .bi {
position: absolute;
padding: 10px;
pointer-events: none;
}
.left-addon .bi {
left: 0px;
}
.left-addon input {
padding-left: 30px;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="inner-addon left-addon">
<i class="bi bi-people"></i>
<input type="text" class="form-control" placeholder="Type Something..."/>
</div>
</div>
</body>
</html>
Ikuti juga berbagai tips dan trick pendek lainnya
tentang design menggunakan CSS dari sahretech di link berikut ini.
|
📰 1. How to Quickly Create a Sidebar with Bootstrap read more
|
|
📰 2. Creating a Simple News Website With Bootstrap read more
|
📰 3. Easy Ways to Install and Use SQLite in Laravel read more
|
Sekian tips cepat dan mudah css kali ini, semoga bermanfaat. Jika ada
pertanyaan silahkan langsung tanya di kolom komentar di bawah ini atau
tanya langsung di fanspage sahretech. Sekian dan terima kasih.
0 Comments
Come on ask us and let's discuss together
Emoji