Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini! ×

4 Cara Memasang Icon di Semua Template Blogger

4 Cara Memasang Icon di Semua Template Blogger Images @rian_seo
12 Share
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.

4 Cara Memasang Icon di Semua Template Blogger
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.

4 Cara Memasang Icon di Semua Template Blogger
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.

4 Cara Memasang Icon di Semua Template Blogger
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.

4 Cara Memasang Icon di Semua Template Blogger
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.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter