আইকন

আপনি প্রিলোড করা ম্যাটেরিয়াল আইকন ফন্ট ব্যবহার করে একটি DevSite পৃষ্ঠার যেকোনো পাঠ্যে আইকন যোগ করতে পারেন। একটি বোতাম উল্লেখ করার সময় আপনি বোতাম আইকন ব্যবহার করতে পারেন।

উপাদান আইকন

একটি DevSite পৃষ্ঠায় আপনার পাঠ্যের সাথে একটি উপাদান আইকন ইনলাইন যোগ করতে:

1. https://fonts.google.com/icons- এ যান ( go/icons নয়)।
2. সার্চ ম্যাটেরিয়াল আইকন বক্সে, আপনি যে আইকনটি চান সেটি সার্চ করুন।
3. ব্যবহারের তথ্য দেখতে আইকনে ক্লিক করুন।
4. ব্যবহারের তথ্য প্যানেলের আইকন ফন্ট বিভাগের অধীনে, দ্বিতীয় কোড ব্লক থেকে আইকনের নামটি অনুলিপি করুন।

5. আইকন যোগ করতে আপনার পাঠ্যে নিম্নলিখিত অনুলিপি করুন:

   <span class="material-icons">ICON_NAME</span>
   

6. আইকনের রঙ পরিবর্তন করতে (বা আকার, যদি প্রয়োজন হয়), একটি style বৈশিষ্ট্য ব্যবহার করুন।

উদাহরণ

নিম্নলিখিত কোডটি "একটি নির্দিষ্ট ইভেন্ট সম্পর্কে বিস্তারিত দেখতে, arrow_right expander arrow-এ ক্লিক করুন।"

To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.

আপনি <span> এর পরিবর্তে <i> ব্যবহার করতে পারেন। উভয় ট্যাগ কাজ করে; যাইহোক, স্প্যান শব্দার্থগতভাবে আরও সঠিক—উদাহরণস্বরূপ, " মুছুন delete ক্লিক করুন" এর জন্য আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

Click <i class="material-icons">delete</i> <b>Delete</b>.

class="material-icons" সহ প্রতিটি উপাদানের জন্য, DevSite aria-hidden="true" এবং translate="no" বৈশিষ্ট্য যোগ করে। এটি অ্যাক্সেসিবিলিটি ট্রি থেকে অপ্রয়োজনীয় আইটেমগুলি সরিয়ে স্ক্রিন পাঠকদের জন্য একটি ভাল ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে এবং আইকনের নামটি ভুলভাবে অনুবাদ করা থেকে রক্ষা করে৷

বোতাম আইকন

একটি বোতাম আইকন ব্যবহার করে এমন একটি পদ্ধতি নথিভুক্ত করার সময়, <img> ট্যাগে class="inline-icon" যোগ করুন। আরও তথ্যের জন্য, বোতাম এবং আইকনগুলির জন্য শৈলী নির্দেশিকা দেখুন।

উদাহরণ

নিম্নলিখিত কোডটি "ক্লিক করুন" পাঠ্য তৈরি করে প্রকল্প তৈরি করুন ।"

Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.