Skip to main content

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.

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;}

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;}

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

Bagaimana, mudah bukan? Selamat mencoba.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB