TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

Weebly সাইটের জন্য 4 ফন্ট অসাধারণ আইকন উইজেট

5

আইকন উইজেট একটি আকর্ষণীয় কল টু অ্যাকশন প্যানেল তৈরি করতে এবং যেকোনো ধরনের তথ্য প্রদর্শন করতে সাহায্য করে। যেহেতু বিভিন্ন সংস্থান থেকে বিনামূল্যে বিশাল আকারের আইকন সেট পাওয়া যায় তাই দীর্ঘ টেক্সট দিয়ে বর্ণনা করার পরিবর্তে একক আকর্ষণীয় আইকন ব্যবহার করে প্রয়োজনীয় তথ্য প্রদর্শন করা সহজ। বিশেষ করে ফন্ট অসাধারণ আইকন এই প্রসঙ্গে ইমেজ খুব ভাল বিকল্প। এই নিবন্ধে আসুন Weebly সাইটের জন্য ফন্ট অসাধারণ আইকন উইজেট তৈরির প্রক্রিয়াটি অন্বেষণ করি।

নীচে উইজেট (শৈলী 1) 4 টি আইকন রয়েছে এবং আপনি আপনার প্রয়োজন অনুসারে আইকন যোগ বা অপসারণ করতে পারেন।

আসুন বৈচিত্র্যের সাথে আরও তিনটি স্টাইল প্রদর্শন করি:

আইকন প্যানেল উইজেটের সকল স্টাইলের সম্পূর্ণ কোড পেতে নিচের ডাউনলোড বাটনে ক্লিক করুন। এবং আপনার উইবলি সাইটে এই উইজেটগুলি কীভাবে যুক্ত করবেন তা জানতে আরও পড়ুন।

Weebly সাইটের জন্য আইকন উইজেট তৈরি করা

আসুন নিচের চারটি অপশন সহ "আমাদের সাথে যোগাযোগ করুন" উইজেট তৈরির একটি উদাহরণ নেওয়া যাক:

  • ইমেইল পাঠান
  • আমাদের কল করুন
  • এখনই চ্যাট করুন
  • ফোরাম দেখুন

এটি একটি বিশুদ্ধ CSS উইজেট যেখানে আমরা ফন্ট অসাধারণ আইকন ব্যবহার করে সহজ তালিকাটিকে একটি আইকন উইজেটে রূপান্তর করি। প্রতিটি আইকন উইজেটে নিম্নলিখিত অংশ রয়েছে:

  • প্যানেল কন্টেইনার (এতে 4 টি আইটেম রয়েছে)
  • কলাম – স্বতন্ত্র আইটেম রয়েছে
  • নিবন্ধ – একটি আইকন এবং একটি শিরোনাম রয়েছে
  • আইকন – ফন্ট অসাধারণ আইকন
  • H2 শিরোনাম যা ডিফল্টরূপে Weebly টাইটেল এলিমেন্টের স্টাইল ব্যবহার করে।

ধাপ 1 – আইকন উইজেটের জন্য শৈলী সংজ্ঞায়িত করা

প্রথমে আমরা কলামের প্রস্থকে 21% হিসাবে সংজ্ঞায়িত করি যাতে 4 টি আইটেম আপনার Weebly থিমের প্রস্থের সাথে মানানসই হয়। আমরা তালিকার বুলেটগুলি "তালিকা-শৈলী: কেউ না" সম্পত্তি দিয়ে সরিয়ে দিয়েছি এবং প্রতিটি তালিকার আইটেমের কিছু মার্জিন থাকবে (নীচে এবং বামে) বাম ভাসমান। আপনি আপনার লেআউট অনুসারে এই সমস্ত স্টাইল পরিবর্তন করতে পারেন। লক্ষ্য করুন যে আমরা তালিকা উপাদানগুলির মধ্যে স্থান তৈরি করতে মার্জিন 20px ব্যবহার করেছি।

/* Individual Column */ .column { display:inline-block; float:left; margin:0 0 20px 20px; list-style:none; width:21%; }

পরবর্তী আমরা তালিকার উপাদানগুলির জন্য শৈলী সহ "হালকা সবুজ" হিসাবে সাধারণ পটভূমির রঙ সহ প্যানেল তৈরি করি (উল এবং লি)। আমরা "বর্ডার-ব্যাসার্ধ: 10px;" ব্যবহার করি প্যানেলগুলির জন্য গোলাকার কোণ তৈরির জন্য, যদি আপনি বর্গক্ষেত্রের আইকনগুলি দেখাতে চান তবে এই লাইনটি সরান।

/* Panel */ #panel { position:relative; z-index:1; } #panel ul li { text-align:center; border:1px solid; } #panel ul li *{ margin:0; padding:0; } #panel ul li .icon { margin-bottom:28px; } #panel ul li article { display:block; padding:30px 0 15px 0; } #panel ul li { color:#464646; background-color: lightgreen; border-color:#D7D7D7; border-radius: 10px; } #panel ul li a { color:inherit; } #panel ul li:hover a { color:#51C4BE; }

পরবর্তী ধাপটি হ’ল ফন্টের দুর্দান্ত আইকনগুলির শৈলীগুলি নীচে সংজ্ঞায়িত করা। আমরা আইকন বোতামগুলির প্রস্থ এবং উচ্চতা 130px, সীমানা ব্যাসার্ধ 50% হিসাবে ব্যবহার করেছি এবং তাদের বৃত্ত তৈরি করতে এবং আইকনের আকার 46px হিসাবে ব্যবহার করেছি। আপনি বর্গাকার বিন্যাসে আইকন তৈরি করতে সীমানা ব্যাসার্ধ অপসারণ করতে পারেন এবং ফন্ট সাইজের বৈশিষ্ট্য পরিবর্তন করে আইকন আকারের আকার বৃদ্ধি / হ্রাস করতে পারেন।

/* Button */ .icon { display:inline-block; } .icon i { position:relative; width:130px; height:130px; line-height:130px; z-index:1; } .icon i, .icon i::after { border-radius:50%; } .icon .fa { font-size:46px; } .icon i::after { position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:1px solid; content:""; z-index:-1; } .icon i { color:#FFFFFF; background-color:#51C4BE;/* IE9 Fallback */ background:linear-gradient(to top right, #256D6A, #51C4BE); } .icon i::after { border-color:rgba(255,255,255,.5); } .icon:hover i::after { background-color:#51C4BE; } #panel ul li:hover .icon i { text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25) } #panel ul li:nth-child(1):hover .icon i::after { background-color:#F9CD36; /* Yellow */ } #panel ul li:nth-child(2):hover .icon i::after { background-color:#FF7659; /* Orange */ } #panel ul li:nth-child(3):hover .icon i::after { background-color:#9771BD;/* Purple */ } #panel ul li:nth-child(4):hover .icon i::after { background-color:#F36174;/* Red */ }

হলুদ, কমলা, বেগুনি এবং লাল রঙগুলি আইকন হভার রঙের জন্য ব্যবহৃত হয় যা আপনার প্রয়োজন অনুযায়ী পরিবর্তন করা যেতে পারে। উইজেটের CSS অংশের শেষ ধাপ হল মোবাইল ডিভাইসে উইজেটকে প্রতিক্রিয়াশীল করার জন্য মিডিয়া প্রশ্ন যোগ করা।

/* Media Queries */ @media screen and (max-width:750px){ #panel ul li { display:inline-block; float:left; width:48.46625766871166%; margin:0 3.06748466257669% 15px 0;} #panel ul li:nth-child(even){ margin-right:0; clear:right; } } @media screen and (max-width: 450px){ #panel ul li { display: block; float: none; width: 95%; } }

ধাপ 2 – Weebly সাইটে CSS যোগ করা

আপনি CSS ফাইলের সম্পূর্ণ উৎস ডাউনলোড করতে পারেন যার নাম "icons_style.css" এবং আপনার Weebly সাইটে "Theme> Edit HTML / CSS > Assets" এর অধীনে আপলোড করতে পারেন (আপনি "স্টাইল" বিভাগে ফাইলটি আপলোড করতে পারেন)। আপনার CSS ফাইলের আপলোড করা ফাইল পাথ হবে ” http://yoursite.com/files/theme/icons_style.css "। এই সিএসএস ফাইলের পাশাপাশি আমাদের একটি ফন্ট অসাধারণ সিএসএস ফাইলও দরকার এবং আপনাকে প্রয়োজনীয় পৃষ্ঠায় উভয় ফাইল লিঙ্ক করতে হবে।

Weebly সাইটের জন্য 4 ফন্ট অসাধারণ আইকন উইজেট

Weebly কোড এডিটরে ফাইল আপলোড করুন

এখন আপনি যে পৃষ্ঠায় উইজেট যুক্ত করতে চান তাতে যান এবং "পৃষ্ঠা> আপনার পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> হেডার কোড" বিভাগের নীচে দুটি সিএসএস ফাইল লিঙ্ক করুন ।

Weebly সাইটের জন্য 4 ফন্ট অসাধারণ আইকন উইজেট

পৃষ্ঠায় হেডার কোড যোগ করুন

<link href="/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

ধাপ 3 – HTML যোগ করা

শেষ ধাপ হল আপনার ওয়েবলি পৃষ্ঠায় " এম্বেড কোড " উপাদানটির ভিতরে প্রয়োজনীয় HTML কোড যোগ করা । উপরের উদাহরণটি "আইকন উইজেট 1. এইচটিএমএল" এর মধ্যে রয়েছে যা আপনি ডাউনলোড করা সোর্স ফাইল থেকে পেতে পারেন। ডান ক্লিক করুন এবং উৎস HTML কোড অনুলিপি করুন এবং "এম্বেড কোড" উপাদানটির ভিতরে পেস্ট করুন। এইচটিএমএল সোর্স কোড থেকে প্রথম দুটি সিএসএস লিঙ্ক অপসারণ করতে ভুলবেন না যা ডেমো উদ্দেশ্যে ব্যবহৃত হয়। এইচটিএমএল কোড নীচের মত হওয়া উচিত:

<div id="panel"> <ul> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-envelope"></i></a> <h2><a href="#">Send Email</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-phone"></i></a> <h2><a href="#">Call Us</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-comments"></i></a> <h2><a href="#">Chat Now</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-group"></i></a> <h2><a href="#">Visit Forum</a></h2> </article> </li> </ul> </div>

আইকন উইজেট কাস্টমাইজ করা

সমস্ত প্রয়োজনীয় স্টাইলগুলি "icons_style.css" ফাইলে সংজ্ঞায়িত করা হয়েছে যা আপনি আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। আমরা সোর্স ডাউনলোডে আরও তিনটি উদাহরণ যুক্ত করেছি যেখানে আমরা "icons_style.css" যেমন আছে তেমনি প্রয়োজনীয় উপাদানগুলি সংশোধন করতে ইনলাইন স্টাইল ব্যবহার করেছি।

  • প্রতিটি প্যানেলের জন্য বিভিন্ন পটভূমির জন্য আইকন উইজেট 2.html ব্যবহার করুন।
  • বিভিন্ন গ্রেডিয়েন্ট কালার আইকন সহ সাদা ব্যাকগ্রাউন্ড প্যানেলের জন্য Icon Widget 3.html ব্যবহার করে দেখুন।
  • প্যানেল সীমানা ছাড়াই সামাজিক আইকন সহ আইকন উইজেট 4.html ব্যবহার করুন।

আপনি এইচটিএমএল -এ টেক্সট / আইকন পরিবর্তন করতে পারেন এবং আপনার প্রয়োজনীয় আইকনটি বেছে নেওয়ার জন্য ফন্ট অসাধারণ আইকন তালিকা উল্লেখ করতে পারেন।

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত