আপনার HTML পেজে আইকন যোগ করার সবচেয়ে সহজ উপায় হলো Font Awesome-এর মতো একটি আইকন লাইব্রেরি ব্যবহার করা।
নির্দিষ্ট আইকন ক্লাসের নাম যেকোনো ইনলাইন HTML এলিমেন্টে (যেমন <i> বা
<span>) যোগ করুন।
নিচের আইকন লাইব্রেরিগুলোর সব আইকন হলো স্কেলযোগ্য ভেক্টর, যা CSS দিয়ে কাস্টমাইজ করা যায় (আকার, রঙ, শ্যাডো ইত্যাদি)।
Font Awesome আইকন ব্যবহার করতে, fontawesome.com-এ যান, সাইন ইন করুন, এবং আপনার HTML পেজের <head> সেকশনে যোগ করার জন্য একটি কোড সংগ্রহ করুন:
<script src="https://kit.fontawesome.com/yourcode.js"></script>
W3Schools-এ Font Awesome দিয়ে কীভাবে শুরু করবেন সে সম্পর্কে আরও পড়ুন - Font Awesome 5 টিউটোরিয়াল।
মনে রাখবেন: কোনো ডাউনলোড বা ইনস্টলেশনের প্রয়োজন নেই!
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js">
</head>
<body>
<i class="fas fa-cloud">
<i class="fas fa-heart">
<i class="fas fa-car">
<i class="fas fa-file">
<i class="fas fa-bars">
</body>
</html>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 class="material-icons">favorite
<i class="material-icons">attachment
<i class="material-icons">computer
<i class="material-icons">traffic
</body>
</html>