Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

CSS Icons


CSS Icons:-



The simplest way to add an icon in your HTML page, so we are using is a icon library, such as Font Awesome.
Add the name of the icon class and library to any inline HTML element like <i>

Font Awesome Icons:-

using the Font Awesome icons , go to fontawesome.com, sign in and use.
<script src="https://kit.fontawesome.com/yourcode.js"></script>

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons with code family</title>


<!--this is icon class-->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>
<body>

<p>Some Font Awesome icons:</p>
<i class="fas fa-code"></i>
<i class="fab fa-android"></i>
<i class="fas fa-grimace"></i>
<i class="fas fa-grin-tears"></i>
<i class="fas fa-book-dead"></i>

<p>Code Fmaily</p>
<i class="fas fa-code" style="font-size:24px;"></i>
<i class="fas fa-code" style="font-size:36px;"></i>
<i class="fas fa-code" style="font-size:48px;color:red;"></i>
<i class="fas fa-code" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Bootstrap Icons:-

Add a link in head part,
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<html>
<head>
<title>Bootstrap Icons with  code fmaily</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>Code fmaily Bootstrap icons:</p>
<i class="glyphicon glyphicon-signal"></i>
<i class="glyphicon glyphicon-qrcode"></i>
<i class="glyphicon glyphicon-gift"></i>
<i class="glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-music"></i>
<br><br>

<p>Code fmaily icons (size and color):</p>
<i class="glyphicon glyphicon-signal" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-signal" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-signal" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-signal" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Google Icons with code family:-

Add a link in head part,
<link href="https://fonts.googleapis.com/icon?family=Material+Icons">

<html>
<head>
<title>Google Icons with code fmaily</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<p>Some Google icons:</p>
<i class="material-icons">code</i>
<i class="material-icons">android</i>
<i class="material-icons">phone</i>
<i class="material-icons">email</i>
<i class="material-icons">laptop</i>
<br><br>

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

</body>
</html>



More Topics