Cara Membuat Simbol Pakai CSS Font-Family

Belakangan ini, banyak sahabat blogger yang menyajikan materi dalam membuat symbol seperti gambar menggunakan font awesome.

Namun sayangnya untuk bisa menciptakan itu, kita diwajibkan menyimpan kode pendukung berupa JQuery dan Script yang jumlahnya cukup banyak. Tentu itu dapat menambah beban loading saat blog diakses.

Nah, untuk itu disini saya mencoba mencari jalan alternatif untuk Anda yang berminat memasang symbol tanpa harus menggunakan jQuery tersebut.

Disini kita hanya memanfaatkan fungsi dari bahasa text. Yaitu merubah font-family bawaan template menjadi font-family yang mendukung simbol.

Awal cerita ide ini muncul dibenak saya ketika menulis naskah pada Microsoft Word. Saat saya merubah font standar menjadi font yang unik-unik, saya jadi teringat bahwa untuk menulis artikel diblog juga memungkinkan untuk merubah bahasa font.

Lalu saya coba mengganti font family di CSS menjadi nama font yang ada di M.Word tersebut dan berhasil.

Jika Anda perlu bantuan penulisan font pada CSS, cermati tutorial berikut ini:
Pertama-tama kita perlu membuat ID pada sebuah kode HTML. Saya akan mencontohkan dengan menggunakan nama ID simbolFont

Contoh:
<span class="simbolFont">Font tulisan ini akan berubah</span>
Langkah selanjutnya "membuat CSS Style"
<style>
.simbolFont {
font-family:Viner Hand ITC;
}
</style>
Hasil:
Font tulisan ini akan berubah

Contoh diatas hanya saya tujukan untuk membantu Anda yang belum tahu cara membuat CSS, jika Anda sudah mengerti silahkan abaikan saja contoh diatas.

Sejauh ini, nama font yang bisa kita gunakan untuk merubah teks menjadi simbol ada 2, yakni Wingdings dan Webdings

Sebagai contoh, saya telah menyiapkan karakter mulai dari A-Z dan a-z
Silahkan Anda lihat hasil dari masing-masing font family berikut


WingdingsA B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Wingdingsa b c d e f g h i j k l m n o p q r s t u v w x y z

WebdingsA B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Webdingsa b c d e f g h i j k l m n o p q r s t u v w x y z

Viner Hand ITCABCDEFGHIJKLMNOPQRSTUVWXYZ

Viner Hand ITCabcdefghijklmnopqrstuvwxyz

Snap ITCABCDEFGHIJKLMNOPQRSTUVWXYZ

Snap ITCabcdefghijklmnopqrstuvwxyz

ParchmentABCDEFGHIJKLMNOPQRSTUVWXYZ

Parchmentabcdefghijklmnopqrstuvwxyz

MagnetoABCDEFGHIJKLMNOPQRSTUVWXYZ

Magnetoabcdefghijklmnopqrstuvwxyz

Old English Text MTABCDEFGHIJKLMNOPQRSTUVWXYZ

Old English Text MTabcdefghijklmnopqrstuvwxyz

JokermanABCDEFGHIJKLMNOPQRSTUVWXYZ

Jokermanabcdefghijklmnopqrstuvwxyz

HarringtonABCDEFGHIJKLMNOPQRSTUVWXYZ

Harringtonabcdefghijklmnopqrstuvwxyz

Termasuk pada teks Simbol diatas, saya menggunakan huruf A sampai Z dan a sampai z
Silahkan Anda cermati dan pilih simbol yang paling Anda suka.
Satu huruf menghasilkan satu simbol
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini