4 Cara Memasang Icon di Semua Template Blogger

Bagaimana memasang icon-icon yang bisa digunakan template jenis blogger? Ada banyak jenis dan macam icon yang bisa kamu pasang di template blogger ini, tapi yang paling umum dan sering digunakan dalam menggunakan icon ini adalah font Awesome.

Bukan hanya pengguna template blogger saja, tema versi WordPress juga banyak menggunakan icon font Awesome ini sebagai pelengkap tampilan tema. Padahal untuk sebuah icon web itu banyak macamnya dan bisa kamu buat sendiri dengan menggunakan foto format PNG atau SVG.

Kumpulan Icon Web untuk Mendesign Website

1. Font Awesome
2. Marterial Icon
3. IonIcons
4. Icon SVG

Memasang Icon Font Awesome di Blog

Untuk kamu yang ingin memasang icon web menggunakan Font Awesome bisa ikuti langkah singkat dibawah ini.

Icon FontAwesome

Salin kode link font awesome dibawah ini, dan letakan kode ini diatas antara kode </body> atau </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Jangan lupa klik " SIMPAN "

Memasang Marterial Icon di Blog

Apa itu marterial icon? sederhananya ini adalah icon yang disediakan oleh Google sendiri buat kepentingan kita mendesain sebuah tema website.

Pemasangan cukup sederhana, bahkan sama seperti memasang icon font awesome sebelumnya tadi.

Marterial Icon

Salin kode dibawah ini.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Letakan diatas kode tema </head> atau </body> Atau bisa juga dengan cara dibawah ini menggunakan @font-face.

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

Letakan kode diatas, diantara kode ]]></b:skin> atau </style>

Klik " SAVE / SIMPAN " tema kamu.

Memasang Icon IonIcons di Blogger

Sama halnya seperti icon Font awesome, hanya saja tampilan icon disini lebih halus dari pada icon font awesome.

IonsIcon

Tapi untuk dari segi jumlah icon, IonsIcon ini masih bisa disebut sedikit dan tidak sebanyak icon yang ada di Font Awesome.

Salin kode ionsicon link CSS dibawah ini.

<link href='//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'/>

Letakan kodenya tepat diantara kode </head> atau </body>

Memasang Icon SVG di Blogger

Jika 3 icon diatas harus menggunakan CSS enternal yang lumayan memakan loading halaman suatu blog, maka untuk icon SVG ini adalah solusi untuk memberikan loading yang ringan dan cepat sebagai penganti icon diatas.

SVG icon

Tetapi, ada kekurangan dari menggunakan icon SVG ini. yaitu sulitnya dalam pemasangan dan juga penerapannya, sangat tidak dianjurkan bagi kamu yang masih belum paham betul tentang coding.

Untuk mendapatkan icon SVG yang kamu inginkan, bisa buka lewat link " disini "

Cara menggunakan icon SVG yang lengkap, bisa kamu cek atikel kami sebelumnya yang berjudul cara memasang logo / icon SVG di Blog.

Akhir Kata

Demikian informasi trik yang dapat kami sampaikan tentang masalah icon yang bisa kita gunakan di setiap design web. Jika ada pertanyaan ataupun masalah lainnya jangan ragu untuk menulis komentarnya di blog ini.

Berbagi :