নিজস্ব ওয়েব আইকন বানাব কিভাবে?
কারো কারো মনে এমন ইচ্ছে হতে পারে যে, তাদের ওয়েব পেজে নিজস্ব অর্থাৎ নিজের ওয়েবসাইটের কন্টেন্ট গুলোর মেনুকে আইকন সহ উপাস্থাপন করতে। কেউ মনে করে, ওয়েব পেজের আইটেম গুলোকে যখন লিষ্ট আকারে দেখানো হবে তখন শুরুতে সেই আইটেম গুলোর একটি আইকন থাকলে সুন্দর দেখাবে। কিন্তু সব আইকন যে ফ্রিতে পাওয়া যাবে এমন কথা নেই। অথবা আমি যেমন আইকন চাই, তেমন আইকন হয়তো অনলাইনে পাওয়া যাচ্ছে না। এমন অবস্থায় নিজের মত করে আইকন তৈরী করা গেলে খুব ভাল হয়। আর তাই আমি এখানে খুবই সহজে নিজস্ব ওয়েব আইকন তৈরি করার কিছু নিয়ম তুলে ধরেছি। নিচের স্টেপগুলো অনুস্বরণ করলে আপনি যে কোন সময় যে কোন কাজে আপনার নিজস্ব আইকন তৈরী করে ব্যবহার করতে পারেন।
| প্রথম স্টেপ |
|---|
|
প্রথমে পটোশপে গিয়ে 500px X 500px পরিমাপে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড রেখে একটি লেয়ার তৈরী করুন। এবার সম্পুর্ণ লেয়ার জুড়ে আপনার ছবি বানিয়ে ফেলুন। ছবি কমপ্লেট হয়ে গেলে PNG ফর্মেটে ছবিটি সেভ করুন। |
|
| দ্বিতীয় স্টেপ |
|---|
|
আইকন বানানোর জন্য ছবি যখন রেডি, তখন সর্ব প্রথমে ছবিটিকে PNG ফর্মেট থেকে SVG ফর্মেটে কনভার্ট করতে হবে। PNG থেকে SVG ফর্মেটে কনভার্ট করার জন্য এই ওয়েবসাইটের এই Convert image to the SVG format টুলস ব্যবহার করুন। |
|
| তৃতীয় স্টেপ |
|---|
|
এবার RGB ফর্মেট থেকে আইকন বানানোর জন্য এই ওয়েবসাইটের এই IcoMoon-Free টুলস ব্যবহার করুন। প্রথমে বাম পাশের উপরে Import Icons লেখা একটি বাটন দেখবেন, সেটাতে ক্লিক করে আপনার SVG ফাইলটি নিয়ে নিন। আইকন রূপে আপনার ছবিটি দেখা যাবে। সেটার উপর ক্লিক করে সেলেক্ট করুন। নিচে ডান পাশে Generate Font লেখা বাটন দেখবেন, সেটাতে ক্লিক করলে একটি ZIP ফাইল আপনার কম্পিউটারে ডাউনলোড হবে। সেটাকে আনজিপ করার পর কয়েকটি ফাইল এবং ফোল্ডার পাবেন। সেখান থেকে CSS অর্থাৎ style.css ফাইল আর fonts নামে ফোল্ডারটি রেখে বাকি গুলো মুচে দিন। এবার আপনার সিএসএস ফাইলটি ওপেন করুন। সব চেয়ে নিচে একটি ক্লাসের নাম পাবেন। সেই ক্লাসটি আপনি আপনার HTML ফাইলে লিখতে হবে। আমি আমার সিএসএস এখানে দেখালাম। এর পর এইচটিএমএল ফাইলে কিভাবে সেই আইকন সংযুক্ত করেছি সেটা দেখুন। তখন আপনি আপনার আইকন সংযোগ করার নিয়ম বুঝতে পারবেন। |
|
এটা আমার style.css
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?u5o739');
src: url('fonts/icomoon.eot?u5o739#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?u5o739') format('truetype'),
url('fonts/icomoon.woff?u5o739') format('woff'),
url('fonts/icomoon.svg?u5o739#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-markup:before {
content: "\e900";
}
এটি আমার এইচটিএমএল ফাইল
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make Your Own Web Icons</title>
<link rel="stylesheet" href="style.css">
<style>
div{background-color:#333;color:#fff;text-align:center;padding:10px;}
.icon-markup:hover{color:yellow;}
</style>
</head>
<body>
<div>
<h1><i class="icon-markup"></i> This Is a Custom Web Icon</h1>
<p> আইকন'টির উপর মাউস নিয়ে হোভার করে দেখুন।</p>
</div>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন