Cara Pasang Material Iconts Font For The Web Di Blog

Ini adalah sebuah kabar baik untuk web developer atau blogger yang suka ngoprek template blog. Selain Font Awesome, kini ada font icon baru dari Google yang bisa kita gunakan ntuk menghias blog tercinta kita yaitu Material Icons.

Cara penerapannya pun cukup mudah seperti halnya Font Awesome dengan kostomisasi menggunakan CSS. Ada terdapat banyak material icon yang bisa kita gunakan, namun sayang saat ini belum tersedia ikon sosmed. Namun saya yakin kedepannya pasti akan tersedia juga ikon sosmed dan ikon-ikon baru lainnya, jadi material icon ini layak kita coba.

Contoh penampakan material icon ini seperti tampak di bawah ini.



Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan simpan @font-face material icon di bawah ini di atas kode </style> atau di atas kode ]]></b:skin>


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

2. Langkah Kedua
Untuk menampilkan ikonnya di blog, kita hanya perlu meng-copy kode HTML dari tiap-tiap ikon yang ingin kita gunakan dari Material Icons Library. Silahkan klik ikon yang kita pilih kemudian klik tab Icon Font di pojok kanan bawah. Lalu silahkan copy kode HTML ikon tersebut, sebagai contoh seperti di bawah ini.


<i class="material-icons">home</i>

Atau bisa mengunakan dengan kode HTML Entity seperti di bawah ini.


<i class="material-icons">&#xE88A;</i>

3. Kustomisasi Ikon
Material icons ini sangat mudah kita kustomisasi baik ukuran maupun warnanya dengan CSS.

Ukuran ikon ini akan mengikuti ukuran font di tempat ikon diletakan karena sudah kita setting pada CSS dengan font-size:inherit. Namun untuk ukuran ikon, kita bisa merubahnya dengan menambahkan sebuah class dengan font-size seperti di bawah ini.


.material-icons.md-16{font-size:16px;}
.material-icons.md-18{font-size:18px;}
.material-icons.md-24{font-size:24px;}
.material-icons.md-36{font-size:36px;}
.material-icons.md-48{font-size:48px;}

<i class="material-icons md-16">&#xE88A;</i>

<i class="material-icons md-18">&#xE88A;</i>

<i class="material-icons md-24">&#xE88A;</i>

<i class="material-icons md-36">&#xE88A;</i>

<i class="material-icons md-48">&#xE88A;</i>

Untuk warna ikon, kita juga tinggal menambahkan class dengan color seperti di bawah ini.


.material-icons.md-red{color:red;}
.material-icons.md-yellow{color:yellow;}
.material-icons.md-green{color:green;}
.material-icons.md-blue{color:blue;}
.material-icons.md-grey{color:grey;}

<i class="material-icons md-36 md-red">&#xE88A;</i>

<i class="material-icons md-36 md-yellow">&#xE88A;</i>

<i class="material-icons md-36 md-green">&#xE88A;</i>

<i class="material-icons md-36 md-blue">&#xE88A;</i>

<i class="material-icons md-36 md-grey">&#xE88A;</i>

Selain itu kita juga bisa menambahkan style CSS lainnya yang kita inginkan dengan penambahan sebuah class seperti di atas.

Bagaimana, mudah bukan? Selamat mencoba.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments