CSS ஐகான்கள்
Font Awesome போன்ற ஐகான் நூலகத்தைப் பயன்படுத்தி, உங்கள் HTML பக்கத்தில் ஐகான்களை எளிதாகச் சேர்க்கலாம்.
ஐகான் நன்மைகள்:
அனைத்து ஐகான் நூலகங்களிலும் உள்ள ஐகான்கள், அளவிடக்கூடிய திசையன்கள் ஆகும், அவை CSS உடன் தனிப்பயனாக்கப்படலாம் (அளவு, நிறம், நிழல், போன்றவை).
ஐகான்களை எவ்வாறு சேர்க்கலாம்
உங்கள் HTML பக்கத்தில் ஐகான்களைச் சேர்க்க எளிய வழி, Font Awesome போன்ற ஐகான் நூலகத்தைப் பயன்படுத்துவதாகும்.
குறிப்பிட்ட ஐகான் வகுப்பின் பெயரை எந்த உள்நிலை HTML உறுப்புக்கும் ( <i> அல்லது <span> போன்றவை) சேர்க்கவும்.
Font Awesome ஐகான்கள்
Font Awesome ஐகான்களைப் பயன்படுத்த, fontawesome.com க்குச் சென்று, உள்நுழைந்து, உங்கள் HTML பக்கத்தின் <head> பிரிவில் சேர்க்க ஒரு குறியீட்டைப் பெறவும்:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<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>
</body>
</html>குறிப்பு:
பதிவிறக்கம் அல்லது நிறுவல் தேவையில்லை! Font Awesome CDN மூலம் தானாகவே ஏற்றப்படுகிறது.
கூடுதல் வளங்கள்:
அனைத்து Font Awesome ஐகான்களின் முழுமையான குறிப்புக்கு, எங்கள் Icon Reference ஐப் பார்வையிடவும்.
Bootstrap ஐகான்கள்
Bootstrap glyphicons ஐப் பயன்படுத்த, உங்கள் HTML பக்கத்தின் <head> பிரிவில் பின்வரும் வரியைச் சேர்க்கவும்:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<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>
</body>
</html>குறிப்பு:
பதிவிறக்கம் அல்லது நிறுவல் தேவையில்லை! Bootstrap CDN மூலம் தானாகவே ஏற்றப்படுகிறது.
Google ஐகான்கள்
Google ஐகான்களைப் பயன்படுத்த, உங்கள் HTML பக்கத்தின் <head> பிரிவில் பின்வரும் வரியைச் சேர்க்கவும்:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<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>
</body>
</html>குறிப்பு:
பதிவிறக்கம் அல்லது நிறுவல் தேவையில்லை! Google CDN மூலம் தானாகவே ஏற்றப்படுகிறது.
கூடுதல் வளங்கள்:
அனைத்து ஐகான்களின் முழுமையான பட்டியலுக்கு, எங்கள் Icon Tutorial ஐப் பார்வையிடவும்.
ஐகான் நூலக ஒப்பீடு
Font Awesome
2000+ இலவச ஐகான்கள், SVG/வலை எழுத்துரு, சுழற்சி/அனிமேஷன் ஆதரவு, பிரீமியம் ஐகான்கள் கிடைக்கும்
Bootstrap Glyphicons
250+ ஐகான்கள், Bootstrap 3 உடன் இலவசம், எளிய பயன்பாடு, ஆனால் Bootstrap 4/5 உடன் கிடைக்காது
Google Material Icons
Material Design தத்துவங்கள், 1000+ ஐகான்கள், Google வடிவமைப்பு சூழலுடன் நன்றாக வேலை செய்கிறது
CSS தனிப்பயனாக்கம்:
இந்த நூலகங்களில் இருந்து வரும் ஐகான்களை CSS ஐப் பயன்படுத்தி முழுமையாக தனிப்பயனாக்கலாம். டெவலப்பர்கள் அளவு, நிறம், தெளிவின்மை, நிழல்கள், சுழற்சிகள் மற்றும் அனிமேஷன்களை மாற்றலாம்.
CSS ஐகான்கள் பயிற்சி
இந்தப் பக்கத்தின் தலைப்புகள் பற்றி சில கேள்விகளுக்குப் பதிலளிப்பதன் மூலம் உங்கள் திறமைகளைச் சோதிக்கவும்.
உங்கள் HTML கோப்பில் "fontawesome.com" இலிருந்து ஒரு ஸ்கிரிப்ட்டைச் சேர்த்தால் எந்த ஐகான் நூலகத்தைப் பயன்படுத்தலாம்?
அணுகல் கருத்துகள்
சரியான ஐகான் செயல்படுத்தலில் அணுகல் கருத்துகள் அடங்கும். ஐகான்கள் பொருத்தமான ARIA லேபிள்கள், விளக்கமான உரை மாற்றுகள் மற்றும் போதுமான வண்ண முரண்பாடு ஆகியவற்றைக் கொண்டிருக்க வேண்டும்.