Cara mudah membuat Mobile Navigation Icons

Semakin banyak orang berselancar di Internet melalui perangkat mobile saat ini, sehingga beberapa hal di website perlu disesuaikan agar sesuai dengan ukuran layar yang lebih kecil. Termasuk Navigasi Web.
Ikon di bawah ini, jika Anda mungkin, adalah ikon paling populer untuk mewakili "mobile menu / navigasi".

Dalam posting ini, kita akan melihat beberapa cara untuk menambahkan ikon dan jalan mana yang paling mudah.

Menggunakan Gambar Bitmap

Semua orang tahu bagaimana melakukannya dengan cara gambar Bitmap. Kita hanya dapat membuat ikon ini di Photoshop, simpan ke gambar (mungkin di PNG atau format JPG) dan kemudian menetapkan melalui background-image dalam CSS.
Namun, gambar bitmap kekurangan skalabilitas. Secara khusus, ketika kita harus memperbesar gambar, mungkin berubah buram atau pixelated. Dengan availabiity perangkat resolusi tinggi di pasar hari ini, skalabilitas citra merupakan salah satu faktor penting Anda tidak mampu untuk mengabaikan.

Cara Bootstrap

Ini adalah bagamana cara Bootstrap, kerangka pembangunan front-end, menampilkan "ikon navigasi" dalam ukuran layar yang lebih kecil. Ini menggunakan tiga elemen <span> :

view plaincopy to clipboardprint?

1. <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
2.     <span class="icon-bar"></span>  
3.     <span class="icon-bar"></span>  
4.     <span class="icon-bar"></span>  
5. </button>  

Meskipun ikon yang diinginkan dapat dicapai melalui styling, memiliki markup tambahan untuk hanya menampilkan ikon kecil ini dianggap berlebihan (terutama jika kita mematuhi“best practices”).
Jadi, mari kita cari cara yang lebih baik yang memerlukan markup kurang.

Menggunakan Icon Font

Cara lain yang dapat dilakukan adalah dengan menggunakan ikon font. Beberapa font menyediakan ikon ini dalam set mereka, sepertiFont Awesome and EnTypo. Untuk menampilkan ikon, kita cukup menambahkan karakter masing-masing, seperti yang ditunjukkan dalam posting ini.
Beberapa keuntungan menampilkan ikon dengan font adalah bahwa ikon mudah untuk diubah melalui CSS dan resolusi-independen. Di sisi lain, ia juga memiliki beberapa kelemahan: file bisa sangat besar tergantung pada berapa banyak karakter yang akan disimpan, dan kita perlu setidaknya empat format file yang berbeda untuk menutupi kompatibilitas browser dan ini memerlukan banyak pekerjaan untuk menampilkan hanya satu ikon.

“Trigram for Heaven”

Anehnya, ada satu karakter HTML disebut Trigram for Heaven. Ini (mungkin) cara terbaik yang saya bisa menemukan. Sederhananya karakter HTML (☰) dan Anda harus mendapatkan ikon ini pada halaman Web Anda.

Kita kemudian dapat mengubahnya dengan CSS, seperti mengubah warna atau ukuran itu tanpa kehilangan ketajaman dan juga menghubungkan ke sumber eksternal. Selanjutnya, Anda bisa menyelam kelibrary ini untuk menemukan karakter khusus HTML.
Artikel asli di hongkiat.com
Cara mudah membuat Mobile Navigation Icons