How To Put an Iocns Inside a Input Field In Bootstrap

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons,To use Font Awesome icons, add the following to your HTML page (No downloading or installation is required).

Bootstrap Icons

1.How To Create A Icons In Bootstrap 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>

<div class="container">
    <h1>My Icons <i class="fas fa-heart"></i></h1>
    <p>An icon along with some text: <i class="fas fa-thumbs-up"></i></p>
</div>

<div class="container">
    <p>Others:</p>
    <i class="fas fa-cloud"></i>
    <i class="fas fa-coffee"></i>
    <i class="fas fa-car"></i>
    <i class="fas fa-file"></i>
    <i class="fas fa-bars"></i>
</div>

</body>
</html>

Related Post