फ़ॉन्ट बहुत बढ़िया

अपने प्रोजेक्ट में फ़ॉन्ट विस्मयकारी शामिल करें:
इस पंक्ति को अपने HTML के

एक आइकन का उपयोग करें

एक आइकन का उपयोग करने के लिए, उपयुक्त वर्गों के साथ एक या तत्व जोड़ें:

सामग्री चिह्न

अपने प्रोजेक्ट में सामग्री चिह्न शामिल करें:
इस पंक्ति को अपने HTML के

एक आइकन का उपयोग करें

एक आइकन का उपयोग करने के लिए, वर्ग सामग्री-आइकन और आइकन नाम के साथ एक तत्व जोड़ें:

camera_alt

2. कस्टम आइकन के लिए सीएसएस का उपयोग करना

आप सीएसएस के साथ अपने खुद के आइकन भी बना सकते हैं। यहां शुद्ध CSS का उपयोग करने वाला एक सरल उदाहरण दिया गया है:

एक बुनियादी HTML संरचना बनाएं

अपने आइकन को स्टाइल करने के लिए CSS जोड़ें

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

यह सीएसएस स्निपेट बॉर्डर और स्थिति का उपयोग करके एक सरल तारा आकार बनाता है।

3. एसवीजी प्रतीक

आप उच्च-गुणवत्ता वाले आइकन के लिए एसवीजी का भी उपयोग कर सकते हैं:

इनलाइन एसवीजी

पृष्ठभूमि छवि के रूप में एसवीजी का उपयोग करना

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

सुझावों

आकार और रंग: फ़ॉन्ट आइकन और इनलाइन एसवीजी के लिए, आप आकार को फ़ॉन्ट-आकार या चौड़ाई और ऊंचाई गुणों के साथ समायोजित कर सकते हैं, और रंग को रंग के साथ बदल सकते हैं या एसवीजी के लिए भर सकते हैं।
पहुंच-योग्यता: जहां आवश्यक हो वहां वर्णनात्मक पाठ या एरिया विशेषताएँ जोड़कर हमेशा पहुंच-योग्यता पर विचार करें।
आपके प्रोजेक्ट के लिए सबसे अच्छा क्या काम करता है यह जानने के लिए बेझिझक प्रयोग करें और अलग-अलग तरीकों का मिश्रण करें!