Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar/icon yang kita tambahkan. Show Untuk menggunakan icon kalian punya beberapa pilihan ya, ada Font Awesome, Bootstrap 3 Icons, dan Google Icons. Tapi disini mimin akan memakai icon dari Font Awesome 6 yang paling terbaru. Karena Font Awesome ini mempunyai library jumlah icon yg dia punya mencapai 7.842 icons, sedangkan untuk icon free 1.588 icons. Artinya kamu bisa pakai library dari Font Awesome ini dengan cuma-cuma loh. Yuk dari pada kelamaan mending langsung ajah. Halo selamat datang di Evetry! Bagi kamu yang senang mengutak-atik tampilan website atau blog kamu, mungkin pernah mendengar Font Awesome atau bahkan pernah menggunakannya. Font Awesome merupakan sebuah situs yang menyediakan icon berbasis web font yang dapat kamu gunakan secara gratis pada website kamu.Tapi mungkin saja bentuk icon yang tersedia secara gratis di Font Awesome tidak seperti yang kamu inginkan sehingga membuat kamu ingin membuat web font icon versi kamu sendiri. Pada artikel kali ini saya akan membahas cara membuat icon dengan web font seperti Font Awesome. Icon yang saya gunakan pada website ini juga menggunakan web font yang saya rancang sendiri. Dengan menngunakan icon berbasis web font, benar-benar mempermudah saya untuk membuat icon, misalnya untuk membuat logonya Evetry yang seperti ini . saya hanya perlu menulis kode . Untuk membuat icon milikmu sendiri, kamu tidak harus memiliki keterampilan desain maupun coding, yang kamu butuhkan hanyalah akses internet. Berikut langkah-langkahnya. Mencari atau membuat iconDi internet banyak sekali situs yang menyediakan icon secara gratis, seperti Flaticon, Freeicons.io, Icon8 dan lainnya. Pada tutorial ini saya menggunakan icon yang disediakan oleh Flaticon, kamu juga dapat menggunakan website penyedia icon gratis selain Flaticon. Jika kamu ingin menggunakan Flaticon juga, silahkan ikuti langkah berikut: Cari IconDi laman Flaticon kamu dapat mencari icon ataupun icon pack. Silahkan cari kata kunci sesuai dengan icon yang kamu butuhkan, misalnya "home".  Setelah itu akan muncul beberapa icon home, cari icon yang menurutmu paling menarik, kemudian tambahkan ke Collections dengan cara arahkan kursor ke icon yang ingin kamu tambahkan klik ikon yang berada di sudut kanan atas. Kamu dapa menambahkan beberapa icon ke Collections Ketika mencari icon, pastikan bahwa icon yang kamu pilih hanya memiliki 1 warna saja dan berekstensi SVG. Download CollectionsApabila semua icon yang kamu butuhkan telah ditambahkan ke Collections, selanjutnya adalah mendownload Collections, caranya: Klik CollectionsKlik tombol Collections yang ada pada navigation bar, maka akan muncul panel collections. Klik Download CollectionsKlik tombol Download Collection yang ada pada panel collection. Pilih SVGSaat ini kamu sudah tidak dapat mendownload icon dalam ekstensi SVG secara gratis dari Flaticon. Sabagai alternatif kamu bisa menggunakan Freeicons.io atau Icon8. Klik Free DownloadJika di internet kamu tidak menemukan icon yang sesuai, kamu dapat membuatnya sendiri. Kamu bisa menggunakan software desain grafis berbasis vektor ataupun tool online yang berfungsi untuk membuat gambar SVG. Karena yang kita butuhkan sebenarnya hanyalah icon yang memiliki ekstensi SVG. Pada artikel yang lain, saya sudah pernah membahas tentang SVG dan . Jika icon yang ingin kamu gunakan sudah siap, langkah selanjutnya adalah mengubah icon menjadi web font, berikut caranya: Mengubah icon menjadi web fontUntuk mengubah icon yang telah kita donwload tadi menjadi web font kita bisa menggunakan IconMoon, Fontello atau tool lainnya. Tetapi pada tutorial ini saya menggunakan IcoMoon, berikut langkah-langkahnya: Ekstrak file iconFile yang kita dowload sebelumnya dari Flaticon berupa file arsip .zip, jadi kita perlu mengekstraknya terlebih dahulu. Ekstrak file tersebut kemudian masukkan kedalam satu folder. Import IconsKlik tombol Import Icons kemudian pilih dan buka icon yang telah di ekstrak tadi. Generate FontAtur dan Download web fontAtur web fontAtur nama icon dengan cara mengedit teks yang ada disamping setiap icon. Nama ini yang nantinya akan digunakan untuk memanggil icon. Untuk memanggil icon formatnya seperti ini: . Untuk mengedit class prefix dan class suffix caranya klik icon roda gigi disampin tombol Download. Tetapi sebaiknya class suffix dibiarkan kosong saja. Pada tutorial ini saya menggunakan i-sebagai suffix. Download web fontUnggah web fontLangkah selanjutnya yang kita lakukan adalah mengupload web font agar dapat diakses secara online. Kamu dapat menguploadnya langsung ke direktori website kamu atau menggunakan CDN. Pada tutorial ini saya akan mengupload web font yang telah saya buat ke Cloudinary. Berikut cara mengupload web font ke Cloudinary.com Ektrak web fontLangkah pertama, ekstrak web font yang telah kita download di IcoMoon Buka CloudinarySelanjutnya buka https://cloudinary.com/, jika belum memiliki akun silahkan buat akun terlebih dahulu, kemudian login. Unggah web fontSetelah masuk ke dashboard Cloudinary, klik Media Library, lalu klik tombol Upload. Kemudian klik tombol Browse yang ada pada menu My File, Selanjutnya buka file web font yang telah di ekstrak pada langka nomor 1, masuk ke folder fonts dan pilih font yang memiliki ekstensi .ttf dan .woff, kemudian buka. Tunggu hingga proses upload selesai. Copy link fontLangkah pertama, salin link file font .ttf dan .woff yang telah kita upload di Cloudinary. Caranya dengan mengarahhkan kursor kearah file font yang telah kita upload kemudian klik icon Copy Link. Simpan link kedua file font tersebut, karena linknya akan kita gunakan pada tahap selanjutnya. Link darifile font yang saya upload pada tutrial ini adalah: Sekarang web font sudah berhasil di upload, langkah terakhir adalah memasang icon web font pada blog atau website kamu. Berikut caranya: Memasang web font pada websiteEdit CSSLangkah pertama buka file "style.css" dari file web font yang telah kita download dari IcoMoon. Isi css tersebut kurang lebih seperti ini: Pada rule @font-face, ubah property src yang saya highlight diatas menjadi seperti ini: Ganti 'url file font woff' dan 'url file font ttf' dengan url file font yang telah kita salin dari Cloudinary pada tahap sebelumny, maka hasilnya seperti ini: Pasang CSS pada websiteSetelah property src pada rule @font-face telah kita ubah, maka selanjutnya pasang CSS tersebut pada website atau blog kamu. Caranya dengan menyalin semua kode yang yang ada pada file 'style.css' yang telah kita edit sebelumnya kedalam tag yang ada diantara tag pada website kamu. Jika kamu menggunakan Blogger simpan kode tesebut tepat diatas ]]>. Gunakan IconJika semuanya sudah selesai itu artinya icon web font yang telah kita buat sudah siap untuk digunakan. Untuk menggunakannya cukup ketik kode , misalnya untuk menggunakan icon home yang telah saya buat pada tutorian ini saya cukup ketik . i- adalah Class Prefix dan home adalah nama icon. Sekarang saya akan mencoba menggunakannya pada Codepen dan mari kita lihat hasilnya: Demikian artikel cara membuat icon menggunakan web font, jika kamu menemukan kesulitan silahkan bertanya pada kolom komentar. |
Cara menggunakan icon html
Pos Terkait
Copyright © 2024 apacode Inc.
