شبیہیں، شبیہیں، شبیہیں

آپ پہلے سے لوڈ کردہ میٹریل آئیکون فونٹ کا استعمال کر کے 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> استعمال کرسکتے ہیں۔ دونوں ٹیگ کام کرتے ہیں؛ تاہم، span لفظی طور پر زیادہ درست ہے — مثال کے طور پر، " ڈیلیٹ 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>.