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

Ini Dia Trik Menggunakan Ikon Sendiri Saat Font Awesome Kurang Lengkap

15 March 2018
in Learn
Ini Dia Trik Menggunakan Ikon Sendiri Saat Font Awesome Kurang Lengkap
1.4k
VIEWS

Daftar Isi

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

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.

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]

Tags: awesonefontfont awesomeikonikon sendiri
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

Angga Permana

Angga Permana

Maju terus sampai TUNTASSS!

Related Posts

No Content Available
Please login to join discussion

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    475 shares
    Share 190 Tweet 119
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    220 shares
    Share 88 Tweet 55
  • Inilah 15 Skin Paling Keren di Mobile Legends

    130 shares
    Share 52 Tweet 33
  • Yuk Ketahui Sejarah Perkembangan Aplikasi Chat di Seluruh Dunia

    124 shares
    Share 50 Tweet 31
  • Kamu Tidak Perlu Marah, Inilah Cara Mengatasi Lag di Mobile Legends

    116 shares
    Share 46 Tweet 29
  • Qlapa Gulung Tikar

    131 shares
    Share 52 Tweet 33
  • Jam Kerja yang Panjang Identik untuk Sebuah Startup?

    113 shares
    Share 45 Tweet 28
  • Pentingnya Melakukan Riset Kompetitor dalam Dunia Bisnis

    119 shares
    Share 48 Tweet 30
  • Begini 3 Cara Cerdas Merawat Mobil Eropa Agar Punya Harga Jual Tinggi!

    108 shares
    Share 43 Tweet 27
  • 1O Alternatif Untuk Photoshop yang Wajib Kamu Coba

    109 shares
    Share 44 Tweet 27

About . Contact . Partnership

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
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

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
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.