[Blogger] Hướng dẫn sử dụng Material Icons trang trí cho blogspot

Chào các bạn, ở loạt bài viết trước tôi đã có bài giới thiệu về fontawesome và ionicons. Chúng đều là những icon nhỏ giúp bạn trang trí cho blogspot của mình. Và ở bài viết này sẽ thêm 1 bộ icon mới toanh nữa và rất quen thuộc với chúng ta đó là Material Icons - sản phẩm của Google

Material Icons phát triển để phù hợp với thiết kế Material (Material Design) đang trở thành xu hướng thiết kế website. Nếu bạn tiếp xúc nhiều với các sản phẩm của gã khổng lồ google thì chẳng còn xa lạ với những icon này nữa

Trước tiên để sử dụng Material Icons bạn cần tích hợp nó vào blogger template của mình. Có vài cách như sau

Cách 1: Đơn giản nhất bạn nhúng đoạn mã sau vào trước thẻ </head>

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>

Cách 2: Bản chất như cách 1 tuy nhiên dùng script để loại bỏ css chặn hiển thị

<script type='text/javascript'>//<![CDATA[
function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("//fonts.googleapis.com/icon?family=Material+Icons"));
//]]></script>

Tuy nhiên 2 cách trên có nhược điểm là đã set font-size điều này sẽ có thể làm vỡ bố cục hoặc hiển thị không được đẹp, không theo ý chúng ta. Bạn có thể dùng !important để đặt lại css ví dụ font-size:inherit !important; nó sẽ thừa hưởng css từ thành phần bao ngoài

Cách 3: Chèn đoạn code sau trước thẻ ]]></b:skin>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://hung1001.github.io/lastest/material-icons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: url(https://hung1001.github.io/lastest/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://hung1001.github.io/lastest/material-icons/MaterialIcons-Regular.woff) format('woff'),
       url(https://hung1001.github.io/lastest/material-icons/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Sau khi tích hợp thành công Material Icons bạn sẽ sử dụng chúng như sau

<i class='material-icons'>
  favorite
</i>

Kết quả: favorite

Thay favorite bằng keyword để hiển thị icon. Tuy nhiên theo google cú pháp trên có thể không hoạt động trên IE huyền thoại. Bạn cần sử dụng keyword dạng hex để nó hoạt động trên tất cả các thiết bị. Như vậy code sẽ trở thành

<i class='material-icons'>
  &#xe87d
</i>

Lại thêm 1 rắc rối nữa đó là kí tự & khi lưu lại sẽ bị báo lỗi cú pháp. Bạn cần thêm amp; vào sau nó để không bị lỗi. Chốt lại cú pháp cuối cùng sẽ là

<i class='material-icons'>&amp;#xe87d</i>

Để sử dụng trong CSS

tag:before {
  font-family: 'Material Icons';
  content: '\eXXX'
}

Thay tag và XXX tương ứng để hiển thị icon.

Lấy list icon tại đây: https://material.io/tools/icons/?icon=restore&style=baseline

Và để bạn tiện tra cứu cũng như get code, tôi giới thiệu project của Shanfan. Project này sẽ liệt kê các icon và get code cực nhanh cho bạn

Bạn tiến hành tải tại đây, giải nén chạy file index.html và click vào icon thì code sẽ tự xuất hiện rất nhanh chóng

Như vậy qua bài viết này ta lại có thêm 1 bộ icon đang rất hót nữa để trang trí cho blog của mình rồi !

Good Luck !