Cara Menggunakan Icon Fontawesome di HTML & CSS

30/04/2020    Risman Hakim    96     Website

Cara Menggunakan Icon Fontawesome di HTML & CSS - Fontawesome merupakan salah satu framework CSS yang bisa kita gunakan sebagai alternatif untuk membuat icon pada halaman website, karena kita tahu bahwa fontawesome memliki banyak jenis icon yang bisa kita pakai. Diartikel kali ini saya akan kasih tutorial bagaimana Cara Menggunakan Icon Fontawesome di HTML & CSS buat teman - teman yang ingin tau bagaimana cara menggunakan nya bisa simak langkah - langkahnya berikut.

Seperti biasa, sebelum menggunakan icon fontawesome kalian wajib menyisipkan atau me-load library fontsawesome, untuk lebih memaksimalkan fontawesome nya saya gunakan secara onlie dari cdnjs seperti berikut.

<head>
    <meta charset="UTF-8">
    <title>Cara Menggunakan Icon Fontawesome di HTML & CSS</title>
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>

Jangan lupa script js dari fontawesome juga disisipkan dibawa setelah tag penutup body.

</body>
    <!-- Fontawesome JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</html>

Setelah menyisipkan library fontawesome seperti diatas, selanjutnya adalah menerapkan icon kedalam browser, apakah berhasil atau tidak, silahkan kalian cari fontawesome kemudian coba sisipkan didalam tag body seperti berikut.

<body>
    <p>
        <i class="fas fa-chevron-down"></i>
    </p>
</body>

Kalian juga bisa mengubah ukuran icon diatas, cara nya kalian tinggan tambahkan didalam CSS nya icon yang akan diubah ukurannya, seperti berikut.

<style>
    .fa-chevron-down { font-size: 50px; }
</style>

Selanjutnya kalian juga bisa menerapkan icon fontawesome di dalam CSS, kalain bisa coba dengan seperti berikut.

<style>
    p::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f078";
    }
</style>

Dengan kedua cara ini tentu kalian bisa memilih yang lebih gampang yang mana tentu disesuaikan juga dengan kondisi, apakah icon harus disisipkan di CSS atau di HTML.

Baiklah cukup sekian pembahasan kali, semoga dengan pembahasan Cara Menggunakan Icon Fontawesome di HTML & CSS bisa bermanfaat, selamat mencoba dan sampai jumpa diartikel selanjutnya.

HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More