X

X

X

CSS এ Icon এর ব্যবহার পদ্ধতি


  
   
   

Icon ব্যবহারের পদ্ধতি

ওয়েব পেজে ICON ব্যবহারের সবচেয়ে সহজ পদ্ধতি হচ্ছে, কোনো আইকন লাইব্রেরি যেমন Font Awesome ব্যবহার করা। আইকন লাইব্রেরি ব্যবহারের সুবিধা হচ্ছে শুধুমাত্র কাঙ্খিত আইকনের সিএসএস ক্লাস কোনো ইলামেন্টে যুক্ত করতে হয়। তাহলেই কাঙ্খিত আইকনটি উক্ত ইলামেন্টে যুক্ত হয়ে যায়।
যেমন,  <i> or <span>

নিচে কিছু আইকন লাইব্রেরি উপস্থাপন করা হলো। এগুলো ভেক্টর আইকন ফলে এদের সাইজ, রং, শ্যাডো ইত্যাদি শুধুমাত্র সিএসএস ব্যবহার করে পরিবর্তন করা যায়। এছাড়া https://cssicon.space/ লিংকে একটি সিএসএস লাইব্রেরি দেওয়া হলো। এটি শুধুমাত্র সিএসএস ব্যবহার করে তৈরি করেছেন একজন ফন্ট প্রিয় তরুণী।


Font Awesome Icon সমূহ

এই আইকন লাইব্রেরি ব্যবহার করার জন্য নিচের HTML code লাইনটি <head> ইলামেন্টের ভেতরে যুক্ত করতে হবে:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

লক্ষ্যণীয়: ফন্ট লাইব্রেরিটি ব্যবহার করার জন্য এটিকে ডাউনলোড বা ইনস্টল করার প্রয়োজন নেই। শুধুমাত্র উপরেল্লিখিত কোডটি ব্যবহার করলেই হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body><i class=”fa fa-cloud”></i>
<i class=”fa fa-heart”></i>
<i class=”fa fa-car”></i>
<i class=”fa fa-file”></i>
<i class=”fa fa-bars”></i>

</body>
</html>

ফলাফল:

      

নিজে নিজে চেষ্টা করুন »


Bootstrap Icon সমূহ

এই আইকন লাইব্রেরি ব্যবহার করার জন্য নিচের HTML code লাইনটি <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>

ফলাফল:

নিজে নিজে চেষ্টা করুন »


Google Icon সমূহ

এই আইকন লাইব্রেরি ব্যবহার করার জন্য নিচের HTML code লাইনটি <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>

ফলাফল:

cloudcloudcloudcloud

নিজে নিজে চেষ্টা করুন »