2019 यहां अपडेट करें:
अपने मटेरियल आइकन को होस्ट करने के लिए, रेगुलर वाले, राउंडेड, शार्प, सभी वेरिएंट। इस रेपो से उन्हें प्राप्त करें:
https://github.com/petergng/material-icon-font
किसी कारण से मुझे नहीं पता कि ये फ़ॉन्ट Google रिपॉजिटरी से आसानी से उपलब्ध क्यों नहीं हैं।
लेकिन यहाँ तुम जाओ।
पैकेज डाउनलोड करने के बाद, बिन फ़ोल्डर पर जाएं और आपको चार वेरिएंट दिखाई देंगे। बेशक, यह आप पर निर्भर है कि आप किसका उपयोग करेंगे।
उनका उपयोग करने के लिए, एक css फ़ाइल बनाएं और
- प्रत्येक संस्करण की आवश्यकता के लिए एक फ़ॉन्ट चेहरा बनाएं:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
url
जहां माउस अपनी परियोजना में स्थित हैं से लिंक करेगा।
- अब आइकॉन क्लासेस को रजिस्टर करने देता है:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
यह दोनों
.material-icons-outlined,
और
.material-icons
वर्गों को एक ही चूक का उपयोग करेगा। यदि आप उपयोग करना चाहते हैं .material-icons-sharp
, तो बस इसे दो श्रेणी के नामों के साथ जोड़ दें।
- अंत में, चरण -1 में आपके द्वारा खींचे गए फ़ॉन्ट चेहरे को प्लग-इन करें।
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
फिर से, अधिक वैरिएंट का उपयोग करने के लिए, जैसे तीव्र, बस इसके ब्लॉक को ऊपर के दो की तरह जोड़ दें।
एक बार हो जाने के बाद ... अपने html पर जाएँ और अपने नए बनाए गए आइकनों का उपयोग करें।
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>