Tutorial Pemrograman

Cara Membuat Simbol Cube dari Font Awesome dengan HTML

HTML adalah salah satu bahasa markup yang berfungsi untuk membuat kerangka atau merancang tampilan website yang dibumbui oleh CSS dan JavaScript sebagai mempercantik tampilan website agar bisa menghasilkan suatu karya aplikasi berbasis web dengan baik dan optimal.

HTML memiliki kode-kode unik yang bisa membuat simbol-simbol tertentu, seperti angka bola, bentuk bangunan, keagamaan, arah panah, barang-barang, dan lain-lain tanpa menggunakan image bitmap (gambar) atau vektor. Pastikan Unicode Character yang kamu pakai di dalam website yakni UTF-8 atau web browser kamu itu support UTF-8 agar kode unik tersebut bisa bekerja dengan baik.

Penulis akan memberikan tutorial cara membuat simbol cube dari Font Awesome dengan HTML. Ini berguna untuk memberikan informasi yang mengenai sesuatu hal yang berkaitan dengan menggambarkan simbol di dalam tampilan website tersebut. Tentunya, kamu menggunakan css library yakni Font Awesome 4 atau Font Awesome 5.

Berikut cara membuat simbol cube dari Font Awesome dengan HTML.

Langkah:

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “symbol-cube-fa.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Selesai.

Catatan:

Kode script yang di atas, untuk membuat simbol cube dengan HTML. Ini harus diawali dengan <span id=”[nama id]”> </span>. Kemudian, masukkan kode unik HTML untuk simbol cube  yakni &#xf1b2 di antara <span id=”[nama id]”> dengan </span>. Setelah itu, tambahkan tanda “;” di simbol cube tersebut agar simbol tersebut bisa bekerja dengan baik. Jangan lupa, taruhkan kode script “class=fa” di dalam elemen atribut tag tersebut.

Kode script yang di atas, untuk mengatur ukuran simbol (font-size) dan pemberian warna (color) pada simbol cube tersebut. Pastikan nama id yang ada di <span> dengan css itu sama, agar pengaturan tersebut bisa bekerja dengan baik.

Demikian tutorial cara membuat simbol cube dari Font Awesome dengan HTML. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial gratis melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top