Trentech.id Logo
No Result
View All Result
  • Login
  • Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Logo Trentech.id
No Result
View All Result
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget

Ini Dia Trik Menggunakan Ikon Sendiri Saat Font Awesome Kurang Lengkap

15 March 2018
in Learn

Mau membuat website, aplikasi mobile, maupun aplikasi desktop, ada beberapa hal yang tidak akan pernah bisa kita hindari. Penggunaan gambar dan ikon menjadi salah satunya. Penggunaan ikon yang menarik sama pentingnya seperti kerapihan teks atau kombinasi warna. Hal tersebut karena satu ikon bisa mewakili apa yang hendak disampaikan oleh seribu kata-kata.

Ada banyak cara untuk menambahkan ikon ke sebuah web, cara yang paling populer ialang menggunakan Font Awesome. Setelah mengimpor file-file yang diperlukan, menambah sebuah ikon semudah ini:

<i class="fa fa-bell"></i>

Meski begitu, ada situasi dimana ikon yang diberikan oleh Font Awesome tidak mencukupi. Misal, baru-baru ini penulis ingin menggunakan logo Facebook, Twitter, dan Airbnb di sebuah website. Facebook dan Twitter tersedia, tapi ikon Airbnb ternyata belum ada. Faktanya, komunitas sudah meminta agar ikon Airbnb ditambahkan sejak 3 tahun yang lalu.

Trik untuk menggunakan ikon yang tidak tersedia ialah dengan tag img. Tapi, cara ini memerlukan konfigurasi lebih banyak dibanding memakai Font Awesome. Disisi lain, Font Awesome tidak bisa memasukkan semua ikon yang diminta.

Untungnya ada cara untuk mendapatkan ikon-ikon yang kita butuhkan tanpa bergantung pada pihak ketiga. Ada sebuah tool bernama Calligraphr. Di artikel ini penulis akan menjelaskan bagaimana membuat kode seperti di bawah ini untuk menghasilkan gambar ikon seperti pada Font Awesome:

<i class="fa fa-troll"/>
<i class="fa fa-like-a-boss"/>
<i class="fa fa-lol"/>

img

Keren kan? Sekarang mari kita buat ikon tambahan versi kita sendiri.

Daftar Isi

  • Buat Sebuah Font
  • Integrasi dengan Font Awesome
  • Menggunakan Font More Awesome

Buat Sebuah Font

Pertama kita harus membuat font baru menggunakan Calligraphr mengikuti instruksi di website mereka. Unduh dulu templatenya. Berikut tampilan template Calligraphr:

img

Selanjutnya yang perlu kita lakukan adalah mengisi kotak-kotak tersebut dengan ikon yang diinginkan. Kita bisa mencetak template tersebut dan menggambar ikon secara manual atau memakai aplikasi Adobe Photoshop atau GIMP dengan gambar yang tersedia di internet.

Berikut gambar template setelah diisi:

img

Selanjutnya unggah template yang sudah diisi ke website calligraphr dan klik tombol “build font”. Kita akan mendapatkan font baru berdasarkan template tadi. Mari kita ubah namanya menjadi FontMoreAwesome.otf.

Integrasi dengan Font Awesome

Selanjutnya kita perlu membuat file CSS baru. mari kita beri nama font-more-awesome.css

Baris pertama file ini mestilah deklarasi font-face. Berikut kodenya:

@font-face {
    font-family: 'FontMoreAwesome';
    src: url('../fonts/FontMoreAwesome.otf');
    font-weight: normal;
    font-style: normal;
}

Setelah itu kita bisa mendefinisikan ikon tambahan yang kita inginkan sebagai berikut:

.fa-troll:before {
    font-family: FontMoreAwesome;
    content: "A";
}

.fa-lol:before {
    font-family: FontMoreAwesome;
    content: "B";
}

.fa-like-a-boss:before {
    font-family: FontMoreAwesome;
    content: "C";
}

Perlu dicatat bahwa kita mendefinisikan gambar ikon sebagai pseudo-elementdengan selector before. Dengan begitu, kita bisa meng-inject gambar yang ingin kita tampilkan ke sebuah elemen melalui kelas-kelas di atas.

Komponen “A”, “B”, dan “C” yang diisi sebagai value content merepresentasikan ikon Troll, Lol, dan Like-a-boss sesuai dengan font yang dibuat dengan Calligraphr.

Font Awesome menggunakan Unicode Private Use Area (PUA) untuk memastikan screen reader tidak membaca karakter yang merepresentasikan ikon tersebut. Tapi, dicontoh ini kita tetap menggunakan alfabet Bahasa Inggris untuk menyederhanakan prosesnya.

Menggunakan Font More Awesome

Langkah terkahir ialah memuat file CSS baru di file index.html kita seperti halnya memuat Font Awesome.

<link href="css/font-more-awesome.css" rel="stylesheet">

Ikon-ikon ini selanjutnya bisa dipakai seperti penggunaan ikon fa lainnya. Misalnya untuk membuat gambar ikon menjadi lebih besasr dan diputar kita tambahkan kelas fa-spin dan fa-lg:

<i class="fa fa-troll fa-spin fa-lg"/>

Perhatikan bahwa sebelum menuliskan fa-troll kita menuliskan fa terlebih dahulu untuk mendapatkan konfigurasi Font Awesome (agar tinggi, lebar, dan teknik renderingnya sama). Berikut isi konfigurasi asli dari Font Awesome:

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[cp/ap]

Berikan rating

Follow Trentech.id di Google News, Klik DI SINI

Tags: awesonefontfont awesomeikonikon sendiri
1.5k
VIEWS
Previous Post

Ini Dia 5 Solusi Membuat Toko Online Gratis Tanpa Koding

Next Post

Ini Dia Cara Tepat Menerapkan MVP Saat Jalankan Startup secara Bootstrap

Related Posts

Pentingnya Kemampuan Komunikasi Bagi Seorang Programmer

24 December 2024
2k

Seorang programmer adalah orang yang terjun dan menyelami bidang TI. Berbicara tentang bidang keilmuan. TI adalah bidang keilmuan yang sangat...

Hacker Paling Berbahaya

Ini Dia 10 Hacker Paling Berbahaya Didunia

15 July 2024
2k

Pada awalnya, hacker pertama kalinya muncul dengan arti positif yaitu untuk menyebut seorang yang memiliki keahlian dalam bidang komputer dan...

Manfaat Belajar Bahasa Pemrograman untuk Kehidupan

7 Keterampilan Wajib Programmer Untuk 5-10 Tahun Ke Depan

21 March 2024
2k

Waktu terus berjalan, begitulah kehidupan. Kita sebagai programmer selalu dituntut untuk mengembangkan keterampilan di saat perkembangan industri TI terus berkembang...

Terpopuler

  • 1140-hiden-dangers-of-wi-fi.imgcache.rev.web.1100.633-832458b3

    3 Cara Memutus Koneksi Orang Lain dari Jaringan Wi-Fi Anda

    948 shares
    Share 379 Tweet 237
  • 8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    2398 shares
    Share 959 Tweet 599
  • 16 Jenis Saham: Panduan Lengkap Memahami Dunia Investasi

    573 shares
    Share 229 Tweet 143
  • Cara Membeli Flipper Zero Indonesia

    299 shares
    Share 120 Tweet 75
  • Ini Dia Cara Aktifkan Whatsapp Dark Mode – Whatsapp Mode Gelap

    147 shares
    Share 59 Tweet 37
  • Dampak Akuisisi Tokopedia, GoTo Rugi Besar

    122 shares
    Share 49 Tweet 31
  • Apa Saja Fitur Flipper Zero?

    566 shares
    Share 226 Tweet 142
  • Prompt ChatGPT untuk Designer

    155 shares
    Share 62 Tweet 39
  • Inilah Ratusan Perintah CMD (Command Prompt) yang Wajib Kamu Coba

    213 shares
    Share 85 Tweet 53
  • Ini Dia 10 Situs Belajar Koding Gratis Untuk Kamu yang Ingin Jadi Programer

    123 shares
    Share 49 Tweet 31

About . Contact . Partnership . Google News . Telegram

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Advertising
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
About . Contact . Partnership . Google News