इस लेख में हम CSS Icons In Hindi in details के बारे में पढ़ेंगे।
CSS Icons In Hindi in details
किसी भी web page में icons add करने के लिए Google, font awesome जैसे site का use करते है और इसका size or color को manage करने के लिए CSS के color और font size जैसे property का use करते है।
CSS में google icone का use कैसे करते है ?
इसका use करने के लिए HTML के head section में google icone के एक link को add करना पड़ता है।
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">अगर आप चाहे तो इसके library को download करके भी use कर सकते है।
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS google font example by Technalay</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<span class="material-icons md-36">face</span>
<span class="material-icons md-36">favorite</span>
<span class="material-icons md-36">backspace</span>
</body>
</html>Preview
CSS में font awesome icone का use कैसे करते है ?
इसका use करने के लिए HTML page के head section में font awesome के एक link को add किया जाता है।
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font awesome example</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>
<body>
<i class="fas fa-address-book"></i>
<i class="fas fa-air-freshener"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-paw"></i>
</body>
</html>How to create custom CSS icons?
Creating a simple play button (triangle icon)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom CSS Icon</title>
<style>
.icon-play {
width: 0;
height: 0;
border-left: 30px solid black;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
</style>
</head>
<body>
<h2>Custom CSS Play Icon</h2>
<div class="icon-play"></div>
</body>
</html>Custom arrow icon using pseudo-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom CSS Arrow Icon</title>
<style>
.icon-arrow {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
background-color: black;
}
.icon-arrow::before {
content: '';
position: absolute;
top: -5px;
right: 0;
width: 0;
height: 0;
border-left: 10px solid black;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
</style>
</head>
<body>
<h2>Custom CSS Arrow Icon</h2>
<div class="icon-arrow"></div>
</body>
</html>Using a background image as an icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom CSS Icon with Background Image</title>
<style>
.icon-custom {
width: 50px;
height: 50px;
background-image: url('icon.png');
background-size: cover;
}
</style>
</head>
<body>
<h2>Custom Icon using Background Image</h2>
<div class="icon-custom"></div>
</body>
</html>
How to increase icon size in CSS?
Font Size के आधार पर
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increase Icon Size</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.icon-large {
font-size: 50px; /* Increase size using font-size */
}
</style>
</head>
<body>
<i class="fas fa-home icon-large"></i> <!-- Home icon with larger size -->
</body>
</html>Shapes के आधार पर
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increase CSS Icon Size</title>
<style>
.icon-play {
width: 0;
height: 0;
border-left: 60px solid black; /* Increase size */
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
</style>
</head>
<body>
<div class="icon-play"></div> <!-- Larger play icon -->
</body>
</html>width and height को control करके
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increase SVG Icon Size</title>
<style>
.icon-svg {
width: 100px; /* Increase the size */
height: 100px;
}
</style>
</head>
<body>
<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
</svg> <!-- SVG icon with larger size -->
</body>
</html>How to create font icons?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increase Icon Size</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.icon-large {
font-size: 50px; /* Increase size using font-size */
}
</style>
</head>
<body>
<i class="fas fa-home icon-large"></i> <!-- Home icon with larger size -->
</body>
</html>इसे भी पढ़े :