Cara Pasang Material Iconts Font For The Web Di Blog

Cara Pasang Material Iconts Font For The Web Di Blog

Bola Hero Gawai

Cara Pasang Material Iconts Font For The Web Di Blog

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

saya pelajari dulu mas, baru di terapakan. makasih untuk artikel Cara Pasang Material Iconts nya. :)

Balas

Iya mas, semoga bisa dimengerti.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×