How To Design a Icons Inside Html Input Fields Using Css

Posted By Bajarangi soft , Posted On 30-09-2020

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome,Add the name of the specified icon class to any inline HTML element (like <i> or <span>),All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.),To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page,To use the Google icons, add the following line inside the <head> section of your HTML page:

1.How To Add Icons

<!DOCTYPE html>
<html>
<head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <!--Get your own code at fontawesome.com-->
</head>
<body>

<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

2.Bootstrap Icons

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<p>Some Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

3.Google Icons

<!DOCTYPE html>
<html>
<head>
    <title>Google Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Related Post

Tabbar With Notification And Search Icons In Flutter
How To Set Up Bottom Navigation Bar With Icons In Flutter
How To Make Curved Header With Icons Using Flutter
How to crerate a Register form easily by using Html,Css and Bootstrap
how to create a register form using css and html and bootstrap
How Can I Create Register Form By Using Html and Css and Bootstrap
How To Create a Register From Just by Using Html and Css and Bootstrap
How To Design a Register Form Easily By Using Html and Css and Bootstrap
Using Css How HTML Elements Should Display
How To Design a Icons Inside Html Input Fields Using Css
How To Add App Launcher Icons In Flutter Android App
How To Use Font Awesome Icons For Html Page Using CSS