টিউটোরিয়াল
ওয়েবের জন্য আইকন (Web Icons)
আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি তারা সবাই কম বেশি আইকন ফন্ট সম্মন্ধে জানি। এবং এটাও জানি যে, ওয়েব ডিজাইনের জন্য আইকন ফন্ট কতটা গুরুত্বপূর্ণ। বর্তমানে ওয়েব ডিজাইনের নিত্য অনুষঙ্গ এই আইকন ফন্ট। এর যথাযথ ব্যবহারে ওয়েব পেজের টাইপোগ্রাফিতে গুণগত পরিবর্তন
আসে। তাই আইকন ফন্টের চাহিদা দিন দিন প্রচুর ভাবে বাড়ছে।
আইকন ফন্ট আসলে এক ধরনের পিক্টোগ্রাম বা চিত্রলিপি যা নির্দিষ্ট একটি ওয়েব কন্টেন্ট ব্লককে উপস্থাপন করে। পূর্বে আইকন হিসেবে ইমেজকে ব্যবহার করা হতো। কিন্তু ইমেজ ওয়েব পেজের উপর লোড
বাড়াত। তাছাড়া জুম করলে ইমেজ গুলি ভেংগে গিয়ে ফাটা ফাটা দেখাত। কিন্তু, বর্তমানে ডেক্সটপ, ওয়েব এবং মোবাইল এপ্লিকেশনে অত্যন্ত চমকপ্রদভাবে আইকন ফন্টকে উপস্থাপন করা হচ্ছে নান্দনিকতার সাথে। যাক, এই টিউটোরিয়াল এবং পরবর্তী কয়রকটি টিউটোরিয়ালে আমি বর্তমান
সময়ের সেরা পাঁচ'টি ওয়েবসাইট সম্পর্কে জানাব, যারা ফ্রী'তে প্রচুর এবং চমৎকার আইকন ফন্ট সেবা দিয়ে থাকে। ওয়েবসাইট গুলো নিম্নরূপ।
Google Material Icons ইন্টারনেট জায়ান্ট গুগল ম্যাটেরিয়াল ডিজাইনের প্রায় সাড়ে সাতশ আইকন প্যাক উম্মুক্ত করেছে। চমৎকার এসব আইকনকে ওপেনসোর্স করে দিয়েছে প্রতিষ্ঠানটি। ফলে বিনামূল্যে এসব আইকন
প্যাকগুলো যে কেউ ডাউনলোড করে অথবা সরাসরি সাথে লিংক যুক্ত করে ব্যবহার করতে পারবেন।
Flaticon Icons ফ্লাটিকন তাদের ডিজাইনের প্রায় ২৮৩৪১ টি আইকন প্যাক সহ ১৩৭৮৯৮৭ টি আইকন উম্মুক্ত করেছে। এখানে কিছু ফন্ট আছে যা ক্রয় করতে হবে এবং বাকি অধিকাংশ ফন্ট বিনামুল্য ডাউনলোড করে ব্যবহার
করতে পারবেন। এখানে একটি বাড়তি সুবিদা হচ্ছে সম্পূর্ণ ফন্ট প্যাক ডাউনলোড করতে হবে না। আপনার যেটা দরকার শুধুমাত্র সেটা ডাউনলোড করে ব্যবহার করতে পারবেন।
Font Awesome ফন্ট অসাম তাদের ডিজাইনের ৪৮৪৫ টি আইকন প্যাক উম্মুক্ত করেছে। এখানে অল্প কিছু ফন্টের জন্য মুল্য পরিশোধ করতে হবে এবং বাকি অধিকাংশ ফন্ট বিনামুল্য ডাউনলোড করে অথবা সরাসরি লিংক যুক্ত
করে ব্যবহার করতে পারবেন।
Themify Icons ওয়েব ডিজাইন বা এপ্লিকেশনের জন্য একটি কমপ্লিট সেট আইকন ফন্ট হল থিমিফাই আইকন। প্রায় সাড়ে পাঁচ শতকের অধিক এই আইকন সেট দিয়ে অনায়াসেই ডিজাইন করুন আপনার পরবর্তী এপ্লিকেশন। আপনি কমার্শিয়াল
অথবা পারসনাল যে কোন উদ্দেশেই এটি ব্যবহার করতে পারেন।
Typicons Icons ওয়েব এপ্লিকেশন এবং কিছু ব্রান্ডের আইকনের জন্য ব্যবহার উপযোগী এই ফন্ট প্যাক। চার ৩৩৫ টির বেশি ফন্ট আইকন রয়েছে এতে। সহজে ডাউনলোড করে ব্যবহার করতে পারবেন।
প্রতিটি ফন্ট আইকন ব্যবহারের নিয়ম উদাহরণ সহ পরবর্তী পেজের টিউটোরিয়ালে বিস্তারিত ভাবে দেখানো হয়েছে। আর্টিকেল পড়ে পূর্ণাঙ্গ বুঝতে না পারলেও সমস্যা নেই। প্রতিটি উদাহরণ এর সাথে ভিডিও লিংক দেওয়া আছে। ভিডিও টিউটোরিয়াল গুলো দেখুন। আশা করি খুবই সহজে বুঝে নিতে পারবেন। নিচে বড় সাইজের একটি উদাহরণ দিয়েছি। উপরোক্ত পাঁচ'টি ওয়েবসাইটের কিছু কিছু আইকন উদাহরণে যুক্ত করে দেখিয়েছি। একটি ওয়েব পেজে আইকন ফন্টের গুরুত্ব বুঝানোর জন্য এমন পদক্ষেপ। তবে, ব্যবহারের নিয়ম গুলো পরবর্তী টিউটোরিয়াল গুলোতে দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Icon Fonts</title>
<link href="icons/font/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="icons/themify-icons.css">
<style>
*{margin:0; padding:0;box-sizing: border-box;}
body{font-family:'SiyamRupali',arial, sans-serif;}
.container{
margin: 0 auto;
width: 1200px;
}
.navigation{
height:50px;
width:100%;
background:Purple;
}
.logo,h3{
font-family: 'CharukolaUltraLight', sans-serif;
font-weight:700;
}
.logo{
height:50px;
width:300px;
color:#fff;
font-size:20px;
line-height:47px;
float:left;
}
.logo span:before{font-size:1.7em;margin-left:7px;}
.menu-inner {
height:50px;
width:650px;
float:right;
}
.menu-inner a,.footer-nav a{
height:50px;
width:120px;
float:left;
display:block;
margin-left:5px;
text-align:center;
font-size:17px;
text-decoration:none;
color:#ccc;
line-height:50px;
}
.menu-inner a:hover,.footer-nav a:hover{color:#fff;}
.iconarea {
float: left;
padding: 8em 0;
height: 100vh;
text-align: center;
}
.icon-inner:first-child{margin-left:0;}
.icon-inner {
width: 32.4%;
float: left;
padding: 25px 15px;
background:#f0f0f0;
text-align: center;
border: solid 1px #dcdcdc;
box-shadow: 0px 0px 3px #ccc;
margin-left: 15px;
}
.icon-inner span {
background:#fff;
display: inline-block;
border-radius: 50%;
height: 120px;
width: 120px;
text-align: center;
line-height: 120px;
}
.icon-inner span:before{
font-size: 5em;
margin-left: 0;
background: -webkit-linear-gradient(#f73131, #0a27f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
max-width: 100%;
}
.article-area{
padding:10px;
float:left;
}
.article-area h3{
color:navy;
font-size:19px;
}
.article-area p{
line-height: 20px;
padding: 10px;
text-align:justify;
font-size:16px;
color:#333;
}
.article-area a{
text-decoration: none;
border-radius: 50px;
border: solid 2px #ccc;
display: inline-block;
padding: 5px 20px;
margin-top: 20px;
color:navy;
background:#fff;
font-size:18px;
}
.article-area a:hover {color:#fff;background:Purple;}
.footer-area{
background:Purple;
height:300px;
width:100%;
clear:both;
}
.footer-nav{
width:650px;
margin:0 auto;
}
.social-btn{
height:60px;
width:500px;
margin-left:33%;
margin-top:30px;
}
.social-btn a{
height:50px;
width:50px;
background:#fff;
color:navy;
border-radius:100%;
padding:5px;
margin:10px;
font-size:25px;
text-decoration:none;
display:block;
float:left;
line-height:40px;
text-align:center;
}
.social-btn a:hover{
background:purple;
color:white;
border:2px solid #fff;
}
.info{
height:40px;
width:1100px;
margin:0 auto;
margin-top:20px;
}
.info i{
height:40px;
width:360px;
display:block;
float:left;
text-decoration:none;
text-align:center;
font-size:20px;
color:#fff;
line-height:50px;
font-family:arial;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
<div class="logo"><span class="flaticon-study"></span> কুসুম পুরা উচ্চ বিদ্যালয়</div>
<div class="menu-inner">
<a href="#"><i class="fa fa-home"></i> Home</a>
<a href="#"><i class="fa fa-map-marker-alt"></i> Head Office</a>
<a href="#"><i class="fas fa-book"></i> Education</a>
<a href="#"><i class="fas fa-info"></i> About Us</a>
<a href="#"><i class="fas fa-mobile-alt"></i> Contact Us</a>
</div>
</div>
<section class="section">
<div class="icon-inner">
<span class="flaticon-kids-couple"></span>
<div class="article-area">
<h3>আপনার সন্তানকে স্কুলে পাঠান</h3>
<p>একমাত্র শিক্ষাই আমাদের উন্নতির চরম শিখরে পৌঁছে দিতে পারে। আজকের ছেলে-মেয়েদের সুশিক্ষা দিয়ে মানুষের মতো মানুষ করে গড়ে তুলতে অভিভাবকদের ভূমিকা অপরিসীম। আপনাদের আদরের সোনামনিদের কেবলমাত্র স্কুলের শিক্ষকদের উপর ছেড়ে দিলেই হবে না, দিনের ২৪ ঘণ্টার মধ্যে মাত্র ৬ ঘণ্টা স্কুলে থাকে আর ১৮ ঘণ্টা থাকে মায়ের কাছে। ফলে এখনকার মায়েদের এ ক্ষেত্রে অত্যন্ত সচেতন ও দায়িত্ববান হতে হবে। সময় মতো আপনার বাচ্চাকে স্কুলে পাঠান।</p>
<a href="#">আরো পড়ুন <i class="ti-angle-double-right"></i></a>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-student"></span>
<div class="article-area">
<h3>আজকের শিশু আগামী দিনের ভবিশ্যত</h3>
<p>শিক্ষাব্যবস্থায় আমূল পরিবর্তন আনা হয়েছে। প্রচলিত শিক্ষাব্যবস্থাকে যুগোপযোগী করতে দেশের বিশিষ্ট শিক্ষাবিদদের সমন্বয়ে গঠিত একাধিক কমিটি প্রতিনিয়ত এ বিষয়ে গবেষণা করে চলেছেন। বিশিষ্ট শিক্ষানুরাগী হাশেম রেজা এলাকার শিক্ষা প্রসারে তার নেয়া বিভিন্ন পদক্ষেপের কথা তুলে ধরে আরও বলেন, আমাদের গণতান্ত্রিক সরকার শিক্ষাব্যবস্থাকে উন্নত বিশ্বের পর্যায়ে নিয়ে যেতে চায়। সেই লক্ষ্যে সরকার সম্ভাব্য সব ধরনের ব্যবস্তা করেছেন। এবং আগামি দিনের জন্য...</p>
<a href="#">আরো পড়ুন <i class="ti-angle-double-right"></i></a>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-classroom"></span>
<div class="article-area">
<h3>শিক্ষাই জাতির মেরুদন্ড</h3>
<p>শিক্ষা বা জ্ঞানই মানুষের জীবনধারণ ও উন্নতির প্রধানতম সহায়ক বা নিয়ামক হিসাবে আখ্যায়িত। একদা গুহাবাসী আদিমমানব আজ যে বিষ্ময়কর সভ্যতার বিকাশ ঘটিয়েছে তার পেছনে রয়েছে মানুষের যুগ-যুগান্তরের অর্জিত জ্ঞান ও অর্জনের প্রক্রিয়া। এ প্রক্রিয়ার নামই হল শিক্ষা। এক সময় শারীরিক সামর্থ জাতির গর্বের বিষয় ছিল, প্রকৃতি প্রদত্ত ঐশ্বর্য জাতির অহমিকার উপাদান যুগিয়েছে। কিন্তু জ্ঞান বিজ্ঞানের বিষ্ময়কর উন্নতির এ যুগে জাতীয় জীবনে শিক্ষার কোন বিকল্প নেই। </p>
<a href="#">আরো পড়ুন <i class="ti-angle-double-right"></i></a>
</div>
</div>
</section>
<div class="footer-area">
<div class="footer-nav">
<a href="#"><i class="fa fa-home"></i> Home</a>
<a href="#"><i class="fa fa-map-marker-alt"></i> Head Office</a>
<a href="#"><i class="fas fa-book"></i> Education</a>
<a href="#"><i class="fas fa-info"></i> About Us</a>
<a href="#"><i class="fas fa-mobile-alt"></i> Contact Us</a>
</div>
<hr style="border-top: 3px double #8c8b8b;width:100%;">
<div class="social-btn">
<a href="#"><span class="ti-linkedin"></span></a>
<a href="#"><span class="ti-youtube"></span></a>
<a href="#"><span class="ti-facebook"></span></a>
<a href="#"><span class="ti-pinterest"></span></a>
<a href="#"><span class="ti-instagram"></span></a>
<a href="#"><span class="ti-google"></span></a>
</div>
<div class="info">
<i><span class="material-icons">perm_identity</span> Aminul Islam (Headmaster)</i>
<i><span class="material-icons">mail</span> kusumpurahighschool@gmail.com</i>
<i><span class="material-icons">call</span> Please Call: 01234567890</i>
</div>
<hr style="border-top: 1px solid aliceblue;width:100%;margin-top:30px;">
<p style="color:#ccc;text-align:center;padding:20px;">© Copyright Kusum Pura Highs Shool 2019 All Rights Reserved.</p>
</div>
</div>
</body>
</html>
ফলাফল
রঙের নাম এবং কোড
বিস্তারিত দেখুন
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন
http এবং https কি
বিস্তারিত দেখুন
SEO গাইড লাইন
বিস্তারিত দেখুন
সকল এইচটিএমএল ট্যাগ
বিস্তারিত দেখুন
এইচটিএমএল এট্রিবিউট
বিস্তারিত দেখুন