Skip to content

CSS: icon

.instui-icon — आइकन सिस्टम: .instui-icon आकार निर्धारण और साझा -icon-<name> पेंटर जो एक ग्लिफ़ (in currentColor) को किसी भी तत्व से पहले मास्क करता है।

Source: icon.css

एक्सेसिबिलिटी

ग्लिफ़ सजावटी है, इसलिए इसे aria-hidden="true" के रूप में चिह्नित करें; केवल तब इसे role या लेबल दें जब आइकन अपने आप अर्थ व्यक्त करे।

उपयोग

css
@import "@pantoken/components/components.css";

उदाहरण

html
<span class="instui-icon -icon-megaphone" aria-hidden="true"></span>

मॉडिफायर

मॉडिफायरविवरण
.-icon-*ग्लिफ़ टोकन (--pantoken-glyph) सेट करें और इसे साझा पेंटर के माध्यम से रेंडर करें (उदाहरण के लिए -icon-search).

स्यूडो-एलिमेंट्स

स्यूडो-एलिमेंटविवरण
::beforeग्लिफ़ स्वयं: एक 1em बॉक्स जो --pantoken-glyph से मास्क किया गया है और currentColor से भरा गया है।

उपयोग किये गए टोकन

Tokenप्रकारमान
--pantoken-glyph<url>url("data:image/svg+xml