Cara Memanggil CDN Font Awesome Tanpa Akses ke head

20 Feb 2025 | dibaca 53 kali

Font Awesome adalah salah satu library ikon yang sangat populer dan sering digunakan di berbagai proyek web. Biasanya, untuk memasukkan Font Awesome ke dalam halaman HTML, kita cukup menambahkan tag <link> di dalam <head>. Namun, ada kalanya kita tidak memiliki akses langsung ke <head> — misalnya, ketika bekerja di platform CMS tertentu yang membatasi pengaturan tema atau plugin.

Meskipun begitu, masih ada cara untuk memanggil Font Awesome melalui Content Delivery Network (CDN) tanpa harus menyisipkan link CSS langsung di <head>. Artikel ini akan membahas beberapa metode yang dapat Anda terapkan untuk memasukkan CDN Font Awesome ke dalam halaman Anda.

Mengapa Memerlukan CDN Font Awesome?

Kecepatan Akses: Menggunakan CDN membantu distribusi file statis dari server terdekat, sehingga proses pemanggilan ikon akan lebih cepat.
Hemat Sumber Daya Server: Anda tidak perlu meng-host file CSS Font Awesome sendiri, sehingga menghemat bandwith dan space hosting.
Mudah Diintegrasikan: Hanya dengan satu baris link atau skrip, Anda sudah bisa memanfaatkan ribuan ikon Font Awesome.

Metode 1: Menggunakan Tag <script> di Bagian <body>

Walaupun kita tidak bisa mengakses bagian <head>, biasanya kita masih dapat menempatkan script di <body>. Kita bisa memanfaatkan JavaScript untuk membuat elemen <link> secara dinamis.

Buat Elemen Link Secara Dinamis: Kita bisa membuat elemen <link> yang dibutuhkan untuk memanggil CSS Font Awesome melalui DOM.
Tambahkan Elemen Link ke Bagian Dokumen: Gunakan JavaScript untuk menyisipkan elemen <link> tersebut ke document.head atau document.body. Meskipun Anda tidak punya akses mengedit HTML <head> secara manual, sering kali document.head masih dapat dimodifikasi melalui JavaScript.

Contoh kodenya sebagai berikut:

<!-- Sebuah contoh halaman HTML -->
<!-- Pastikan Anda menempatkan ini di tempat yang diizinkan, misalnya di bawah <body> -->

<script>
  (function() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
    link.integrity = 'sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    link.crossOrigin = 'anonymous';
    // Menambahkan elemen link ke head
    document.head.appendChild(link);
  })();
</script>

<!-- Sekarang ikon Font Awesome dapat digunakan di halaman ini -->
<i class="fa-solid fa-user"></i>

Dalam contoh di atas, kita membuat elemen <link> lalu menambahkannya secara dinamis ke document.head.
Jika ternyata Anda tidak bisa memanipulasi document.head lewat JavaScript (karena ada pembatasan tertentu), Anda dapat menempelkan <link> tersebut ke document.body. Namun, menempatkan file CSS di body tidak ideal karena gaya (style) baru akan diterapkan setelah body diload, sehingga bisa menimbulkan flash atau tampilan sekilas sebelum CSS aktif.

Metode 2: Menyisipkan CSS Menggunakan <style> dan @import

Jika JavaScript dibatasi dan Anda masih tidak dapat menyentuh <head>, Anda dapat menggunakan pendekatan <style> dengan aturan @import. Metode ini memungkinkan Anda untuk mengimpor file CSS eksternal dari CDN ke dalam dokumen.

<!-- Contoh penggunaan @import -->

<style>
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
</style>

<i class="fa-solid fa-user"></i>

Dalam contoh di atas, kita menempatkan tag <style> langsung di dalam <body> (atau di mana pun kita diizinkan menulis HTML). Didalamnya, kita menggunakan @import untuk memanggil file CSS Font Awesome dari CDN.

Perlu diperhatikan bahwa metode ini tidak direkomendasikan jika Anda ingin performa yang optimal, sebab @import biasanya menambah permintaan HTTP tambahan dan dapat memperlambat proses rendering awal. Meskipun begitu, ini tetap bisa menjadi solusi apabila opsi lain tidak memungkinkan.

Metode 3: Inline Frame (iFrame) atau Widget Terpisah

Pada beberapa platform, Anda mungkin dapat menyisipkan iFrame atau widget khusus yang berisi semua resource yang diperlukan, termasuk link ke Font Awesome. Meskipun cara ini agak tidak lazim, bisa saja membantu jika sama sekali tidak ada akses untuk memasukkan kode tambahan di luar area terbatas.

Buat Halaman HTML Terpisah: Halaman ini memuat Font Awesome melalui <head> secara normal.
Tampilkan di iFrame: Sisipkan halaman tersebut ke dalam iFrame di situs utama.

<!-- Halaman iframe.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-user"></i>
</body>
</html>

<!-- Pada halaman utama -->
<iframe src="iframe.html" width="100" height="100"></iframe>

Dengan metode ini, ikon Font Awesome sudah dimuat di dalam iFrame yang secara teknis terpisah dari halaman utama. Namun, integrasi dan styling bisa menjadi kurang fleksibel karena kita berada di dokumen berbeda.

Memperhatikan Keamanan dengan Subresource Integrity (SRI)

Ketika memanggil file melalui CDN, sebaiknya Anda mempertimbangkan penggunaan Subresource Integrity (SRI). Ini memastikan file yang diunduh benar-benar file yang Anda harapkan, dan belum dimodifikasi oleh pihak ketiga.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  integrity="sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  crossorigin="anonymous"
/>

Nilai integrity berupa hash yang mewakili isi file CSS Font Awesome di versi tertentu. Apabila file tersebut diubah, hash tidak akan cocok, sehingga browser menolak memuatnya.

Beberapa Tips dan Pertimbangan Teknis

Load seawal mungkin: Jika Anda bisa menyisipkan script atau @import sedini mungkin (misalnya, di awal <body>), ikon akan lebih cepat muncul tanpa flash akibat stylesheet yang datang terlambat.
Gunakan Versi Font Awesome Terbaru: Pastikan Anda selalu merujuk ke versi terkini yang tersedia di CDN untuk mendapatkan ikon terbaru beserta perbaikan bug.
Periksa Konflik CSS Lain: Terkadang ada tema atau plugin yang juga menggunakan Font Awesome dengan versi berbeda. Pastikan tidak terjadi konflik yang menyebabkan ikon tidak tampil.
Test di Berbagai Browser: Selalu uji tampilan di peramban modern dan juga peramban lama (jika masih relevan dengan target pengguna Anda).

Penggunaan Ikon Font Awesome

Setelah Font Awesome berhasil dipanggil, Anda dapat langsung menggunakan ikon dengan menambahkan kelas tertentu pada elemen <i>, <span>, atau elemen HTML lainnya. Contohnya:

<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-solid fa-check"></i>

Sementara <i> secara tradisional sering digunakan, sebenarnya Anda bisa menggunakan tag apapun selama Anda menyertakan kelas Font Awesome yang benar. Misalnya:

<span class="fa-solid fa-envelope"></span>

Meminimalisasi “Flash” atau FOUC (Flash of Unstyled Content)

Ketika link CSS Font Awesome dimuat terlambat (karena ditempatkan di body atau dengan @import), terkadang elemen ikon akan tampak kosong sebelum file CSS selesai diunduh. Inilah yang disebut FOUC (Flash of Unstyled Content). Beberapa strategi untuk mengurangi hal tersebut:

Tempatkan Skrip atau @import di Awal <body>: Semakin cepat pemanggilan CSS dilakukan, semakin cepat pula ikon bisa ditampilkan.
Gunakan Preload atau Prefetch (jika memungkinkan): Meskipun tidak selalu mungkin tanpa akses <head>, beberapa CMS memperbolehkan penambahan resource hint untuk memuat CSS lebih cepat.
Tambahkan Gaya Sementara (Fallback): Misalnya, Anda dapat memberikan konten fallback seperti <span> dengan teks atau ikon font default, meski ini mungkin agak merepotkan.

Validasi dan Troubleshooting

Jika ikon tidak muncul, berikut beberapa hal yang bisa diperiksa:

URL CDN Benar: Pastikan URL yang Anda gunakan (versi Font Awesome, jalur file, dan lain-lain) sudah benar.
Jaringan Aman atau Blokir: Beberapa jaringan bisa memblokir sumber eksternal tertentu. Pastikan Anda dapat mengakses CDN dari jaringan tersebut.
Integritas (SRI): Apabila Anda menggunakan atribut integrity, pastikan nilai hash sudah benar untuk versi Font Awesome yang dipakai.
Pengecekan Console Browser: Buka DevTools dan lihat apakah ada pesan error yang mengindikasikan file tidak ditemukan (404) atau error lain.

Catatan Versi Font Awesome

Font Awesome memiliki beberapa versi. Setiap versi membawa perubahan pada struktur nama kelas (misalnya fa, fas, fab, fa-solid, dsb.). Jika Anda menggunakan dokumentasi resmi untuk mencari ikon, pastikan Anda merujuk pada versi yang sama dengan versi yang dimuat dari CDN.

Anda juga dapat menggunakan Font Awesome Free atau Pro. Versi Pro memerlukan lisensi, sehingga biasanya tidak bisa dimuat begitu saja dari CDN publik tanpa pengaturan token khusus.

Perbandingan Metode

Metode	Kelebihan	Kekurangan
Membuat <link> Dinamis via JavaScript	Tetap memanfaatkan `<head>` (meski tidak akses manual) Dapat mengatur `integrity` dan `crossorigin`	Menambah beban JavaScript Berpotensi delay jika skrip dipanggil lambat
@import dalam <style>	Sangat mudah diimplementasikan Tidak memerlukan scripting	Kurang optimal untuk performa Sulit menerapkan Subresource Integrity
iFrame atau Widget	Menciptakan lingkungan terpisah Dapat memuat resource apapun di dalam dokumen terpisah	Kurang fleksibel dalam styling Tidak seamless dengan halaman utama

Contoh Implementasi Singkat

Di bawah ini adalah contoh HTML lengkap di mana Anda tidak punya akses <head> secara manual, tetapi Anda bisa meletakkan script di akhir <body>:

<!-- Halaman utama -->
<!DOCTYPE html>
<html lang="id">
<body>

  <!-- Konten Halaman di Sini -->
  <div>
    <h2>Selamat Datang</h2>
    <p>Ikon di bawah akan dimuat dari Font Awesome.</p>
    <i class="fa-solid fa-heart"></i>
  </div>

  <!-- Menyisipkan CDN Font Awesome via JavaScript -->
  <script>
    (function() {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
      link.integrity = 'sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
      link.crossOrigin = 'anonymous';
      document.head.appendChild(link);
    })();
  </script>

</body>
</html>

Dengan kode di atas, Anda telah berhasil menambahkan Font Awesome walau tidak memiliki akses untuk langsung menyisipkan tag <link> di dalam <head>.