This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 14 November 2017

[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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Kelvin Oscar 9/09/2018 10:37:00 PM
    Nhúng nhiều Font quá không biết có rối không nhỉ :v
    Vẫn thích FontAwesome mặc dù không biết cách nâng lên 5.0 -_-
    Vẫn đang sử dụng 4.x.x
    Please wait while i am loading Facebook SDK js