CSS আইকন

icoń যোগ করা কিভাবে

HTML পাতায় icoń যোগ করার সবচেয়ে সহজ পদ্ধতি হল icoń �ক্ষ্যকে ব্যবহার করা, যেমন Font Awesome。

যে কোনও হাইপারটেক্স্ট এলিমেন্ট (যেমন <i> বা <span>)-এর মধ্যে নির্দিষ্ট icoń শ্রেণীর নাম যোগ করুন。

নিম্নোক্ত icoń �ক্ষ্যকে icońসমস্ত icoń বিকশিত ভেক্টর হয়, যা CSS-এর মাধ্যমে স্বনির্দিষ্টকরণ করা যেতে পারে (মাপ, রঙ, শাড়িতা ইত্যাদি)。

Font Awesome icoń

Font Awesome আইকন ব্যবহার করতে, fontawesome.com-এ যান, লগইন করুন এবং কোডটি যোগ করে HTML পাতার <head> অংশে ফিরে যান:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

আমাদের Font Awesome 5 ট্যুটোরিয়ালে ফোন্ট অ্যাওয়েস 5 ব্যবহার করতে কিভাবে আরও বেশি জানতে পড়ুন。

সংকেত:ডাউনলোড করতে কিংবা ইনস্টল করতে না প্রয়োজন!

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></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>

ফলাফল:

আপনার হাতে পরীক্ষা করুন

Bootstrap আইকন

Bootstrap আইকন ব্যবহার করতে, 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>

ফলাফল:

আপনার হাতে পরীক্ষা করুন

গুগল আইকন

গুগল আইকন ব্যবহার করতে, 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>

ফলাফল:

আপনার হাতে পরীক্ষা করুন