-->
ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Menambahkan Font-Awesome Ke ASP NET

4/08/2020

Dalam tutorial ini kita akan membahas cara menambahkan ikon Font-Awesome ke navbar Anda sehingga tampilan aplikasi yang anda buat akan lebih terlihat profesional. Menambahkan Font-Awesome ini bisa dengan cara menggunakan fitur Manage NuGet Packages ataupun dengan menambahkan folder Font-Awesome ke folder Content secara langsung pada ASP NET MVC. Namun Agung Panduan lebih suka menambahkannya secara Manage Nuget Packages agar terhindar dari masalah compatible.

Font-Awesome ASP NET

Adapun Cara Menambahkan Font-Awesome Ke ASP NET adalah sebagai berikut.

Pertama, Nyalakan jaringan internet anda.

Kedua, Klik kanan pada References pada Solution Explorer dan pilih Manage NuGet Packages.


NuGet Packages

Ketiga, Pilih Online dan Ketikan huruf Font-Awesome pada textbox pencarian hingga muncul pilihan beberapa list yang dapat di install. Yang sesuai dengan ASP NET MVC adalah Font-Awesome pada list pertama. Klik “install” dan tunggu beberapa saat hingga folder css, fonts, images muncul pada Solution Explorer.

Font-Awesome ASP NET

Keempat, Jika folder css, fonts, images berada di luar folder Content. Maka anda dapat memindahkannya ke dalam folder Content > Font-Awesome agar terlihat rapi.


Font-Awesome ASP NET MVC

Kelima, Sekerangan tambahkan script di bawah ini tepat di bawah <head> pada _Layout.cshtml. kenapa di simpan di <head> hal ini agar script ini agar dapat digunakan pada seluruh halaman dan tidak perlu menambahkannya lagi di halaman lain.

<link rel="stylesheet" href="@Url.Content("~/Content/font-awesome/css/font-awesome.min.css")" />

Font-Awesome ASP NET MVC

Keenam, Untuk mengatasi pesan Error: 404 Not Found fontawesome-webfont.woff?v=4.7.0. Pasang kode script di bawah ini di dalam Web.Config.

<staticContent>

      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>

      <remove fileExtension=".woff" />

      <remove fileExtension=".woff2" />

      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />

      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

</staticContent>

Font-Awesome

Ketujuh, Untuk mencoba apakah penambahan ikon Font-Awesome berhasil atau tidaknya. Coba Anda buat script di bawah ini di dalam index.cshtml yang anda buat.


<div class="bg-secondary" style="height:100%">
       <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12 text-white">
                    <div class="row p-3">
                        <div class="col-md-6 col-12">
                            <p class="m-0">All Right Reserved 2020 - <a href="http://www.agungpanduan.com" target="_blank">agungpandun.com</a></p>
                        </div>
                        <div class="col-md-6 col-12 footer-icon text-right">
                            <i class="fa fa-twitter"></i>
                            <i class="fa fa-instagram"></i>
                            <i class="fa fa-pinterest"></i>
                            <i class="fa fa-linkedin"></i>
                            <i class="fa fa-youtube"></i>
                            <i class="fa fa-vimeo"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>

Arahkan ke halaman ikon Font-Awesome untuk melihat ikon mana yang ingin Anda gunakan di http://fontawesome.io/icons/. Biasanya dalam penulisnya < class="fas fa-instagram "> ubah menjadi < class="fa fa-instagram ">

Share This :

0 Comments