Cập nhật 2019 tại đây:
Để tự lưu trữ các biểu tượng vật liệu của bạn, các biểu tượng Thông thường, Tròn, Sắc nét, tất cả các biến thể. Hãy tải chúng từ repo này:
https://github.com/petergng/material-icon-font
Vì một số lý do, tôi không biết tại sao những phông chữ này không thể dễ dàng truy cập được từ kho lưu trữ của Google.
Nhưng của bạn đây.
Sau khi tải xuống gói, hãy chuyển đến thư mục bin và bạn sẽ thấy bốn biến thể. Tất nhiên, nó là vào bạn để sử dụng cái nào.
Để sử dụng chúng, hãy tạo một tệp css và
- Tạo khuôn mặt phông chữ cho từng biến thể bạn cần:
@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');
}
Các urlsẽ liên kết đến nơi các biểu tượng này nằm trong dự án của bạn.
- Bây giờ hãy đăng ký các lớp biểu tượng:
.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;
}
Điều này sẽ làm cho cả hai
.material-icons-outlined,
và
.material-iconscác lớp sử dụng các mặc định giống nhau. Nếu bạn muốn sử dụng .material-icons-sharp, chỉ cần thêm nó vào hai tên lớp.
- Cuối cùng, hãy để chúng tôi bổ sung mặt phông chữ mà bạn đã lấy từ bước 1.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Một lần nữa, để sử dụng nhiều biến thể hơn, như Sharp, chỉ cần thêm khối của nó như hai biến thể ở trên.
Sau khi hoàn tất ... hãy truy cập html của bạn và sử dụng các biểu tượng mới được đúc của bạn.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
