Font Awesome 6: Ulasan Lengkap
- 1 Cara Menginstal Font Luar Biasa
- Metode 1.
- Metode 2.
- 2 Cara Menggunakan Ikon Luar Biasa Font
- 1 ikon standar
- 2 ikon besar
- 3 ikon lebar tetap
- 4 ikon untuk daftar peluru
- 5 ikon dan kutipan berbingkai
- 6 ikon animasi
- 7 Ikon yang Diubah
- 8 ikon kombinasi
- 3 Font Awesome 4.5.0 collection, classes dancss code to insert using the content property
- 4 Sumber Daya Terkait
- Ukuran ikon
- Warna ikon
- Pertanyaan Yang Sering Diajukan
Font Awesome adalah kumpulan ikon vektor yang dapat diskalakan. Ikon dapat diformat menggunakan properti CSS, mengatur warna, ukuran, bayangan, dan banyak lagi. Versi font 5.5.0 mencakup 605 ikon.
1 Cara Menginstal Font Luar Biasa
Metode 1.
Gunakan versi file Font-Awesome.css dengan menambahkan kode berikut ke<head> bagian:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Setelah font terhubung, Anda dapat menggunakan ikon di situs Anda.
Metode 2.
Unduh font dari Font Awesome . Buka arsip dan unggah dua folder dari arsip ke server situs - CSS dan font. Jika Anda sudah memiliki folder dengan nama seperti itu di situs Anda, maka Anda hanya perlu menambahkan file dari folder yang diunduh ke mereka.
Anda dapat menggunakan versi lengkap atau terpini dari file:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Cara Menggunakan Ikon Luar Biasa Font
Ikon dapat ditambahkan ke halaman web dengan dua cara: dengan mengatur kelas yang sesuai untuk<i> dan<span> elements, atauby adding them to the desired element using the :before, :after pseudo-elements danthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Sebelum {Content: "\ f015";/ * Tambahkan ikon rumah */font-family: fontawesome; color: #aaaaaa; margin-right: 10px;}1 ikon standar
Font Awesome dirancang untuk digunakan dengan elemen inline. Untuk menambahkan ikon, pertama -tama Anda harus mengatur kelas FA ke<i> atau<span> elemen.
Untuk menambahkan ikon yang dipilih sebelum atau sesudah elemen, kosong<i></i> atau<span></span> Elemen ditambahkan ke elemen, yang diberi kelas ikon, serta kelas tambahan yang memperluas gaya.
<i class="fa fa-camera-retro"></i>2 ikon besar
Untuk meningkatkan ukuran ikon relatif terhadap wadahnya, gunakan FA-LG (peningkatan 33%), kelas FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 ikon lebar tetap
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation ataulists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Rumah</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Perpustakaan</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplikasi</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Pengaturan</a ></li></ul>4 ikon untuk daftar peluru
Gunakan kelas FA-ul dan FA-LI untuk mengganti peluru default di a<ul>...</ul> Daftar Dibelela.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Daftar barang</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Daftar barang</li> <li><i class="fa-li fa fa-square"></i>Daftar barang</li></ul>5 ikon dan kutipan berbingkai
Use the fa-border class to set the border for the icon. The pull-right danpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor duduk amet, elite adipiscing consectetur. Donec Nec Purus Congue, Posuere Libero In, Porta Sapien. Di Sed Elit Lectus. Sed Lacus Elit, SEMPER Vitae Felis ID, Sodales Congue Sapien.</p>6 ikon animasi
Tambahkan kelas FA-SPIN, FA-PULSE, FA-Refresh, FA-COG untuk mengatur ikon pemintalan. Animasi tidak didukung di IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 Ikon yang Diubah
Untuk memutar atau membalik ikon, gunakan kelas FA-rotate-* dan FA-flip-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 ikon kombinasi
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, danfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes dancss code to insert using the content property
Ikon untuk aplikasi web Fa -adjust - \ f042;Fa -anchor - \ f13d;
Fa -archive - \ f187;
Fa -arrows - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
Fa-balance-scale-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-Battery-EMPTY-\ f244;
Fa-battery-setengah-\ f242;
Fa-battery-quarter-\ f243;
FA-Battery-Three-Quarters-\ F241;
Fa-battery-full-\ f240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binoculars - \ f1e5;
Fa-birthday-cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
Fa -book - \ f02d;
Untuk memutar atau membalik ikon, gunakan kelas FA-rotate-* dan FA-flip-*.
4 Sumber Daya Terkait
Selain koleksi font mengagumkan, Anda dapat menggunakan font ikon lainnya juga.
Fontello.Fontello memiliki koleksi besar berbagai font ikon. Anda dapat memilih ikon yang Anda sukai dan mengunduhnya ke komputer Anda.
Ikon Yayasan.Foundation Icon adalah koleksi font ikon lain dari pengembang kerangka yayasan. Selain ikon standar, situs ini menampilkan ikon bundar, ikon media sosial, dan banyak lagi.
ikon materi.Ikon materi adalah ikon datar terpadu Google yang mewujudkan kemudahan persepsi. Ikon dioptimalkan untuk tampilan yang indah di semua platform umum dan untuk semua resolusi layar.
Koleksi Font Ikon berisi 750+ ikon. Cara termudah untuk menginstal koleksi di situs web Anda adalah dengan menggunakan ikon seperti Google Web Fonts. Untuk melakukan ini, kode berikut termasuk dalam markup halaman:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Untuk menampilkan font di browser dengan benar, elemen yang akan menggunakan font ikon diberikan kelas-ikon:
.material-Icons {font-family: 'material ikon'; Font-Weight: Normal Font-style: Normal Font-size: 24px; / * Ukuran ikon yang disukai */ tampilan: blok inline; Lebar: 1em; Tinggi: 1em; Line-Height: 1; Teks-transform: tidak ada; spasi huruf: kata-kata normal: normal; SPACE PUTIH: Nowrap; Arah: LTR; -webkit-font-smoothing: antialiased; / * Didukung oleh semua browser webkit */ rendering teks: optimizelabibilitas; / * Safari dan Dukungan Chrome */ -Moz-osx-font-smoothing: Grayscale; /* Dukungan Firefox. */ font-feature-settings: 'liga'; /* Yaitu dukungan. */}Ikon itu sendiri ditambahkan menggunakan<I class=''material-ikon''>Kode ikon ligatur atau html</i> Tag, misalnya:
<i class="material-ikon">Account_balance_wallet</i><i class="material-ikon"></i>Ligatur dipahami oleh semua browser modern, yaitu - mulai dari versi 10. Kode ikon dihasilkan secara otomatis, untuk ini Anda perlu mengklik kiri pada gambar ikon dan menyalin tampilan yang disarankan.
Ukuran ikon
Ukuran ikon is controlled by additional classes:
.Material-ikon.md-18 {font-size: 18px;} /* untuk<i class="material-ikon md-18"></i> */.Material-ikon.md-24 {font-size: 24px;} /* untuk<i class="material-ikon md-24"></i> */.Material-ikon.md-36 {font-size: 36px;} /* untuk<i class="material-ikon md-36"></i> */.Material-ikon.md-48 {font-size: 48px;} /* untuk<i class="material-ikon md-48"></i> */Warna ikon
Warna ikon juga diatur menggunakan kelas tambahan:
.MATERIAL-ICONS.MD-DARK {COLOR: RGBA (0, 0, 0, 0.54);} /*<i class="material-ikon md-dark"></i> */.MATERIAL-ICONS.MD-LIGHT {Color: RGBA (255, 255, 255, 1);} /*<i class="material-ikon md-light"></i> */.MATERIAL-ICONS.MD-DARK.MD-INACTIF {COLOR: RGBA (0, 0, 0, 0.26);} /*<i class="material-ikon md-dark md-inactive"></i> * /.MATERIAL-ICONS.MD-LIGHT.MD-INACTIF {COLOR: RGBA (255, 255, 255, 0.3);} /*<i class="material-ikon md-light md-inactive">wajah</i> */Untuk mengatur warna khusus, Anda perlu menambahkan kelas yang mendefinisikan warna ikon, misalnya:
.Material-ikon.indigo {color: #1a237e;} /*<i class="material-ikon indigo"></i> */Pertanyaan Yang Sering Diajukan
- Apa font yang luar biasa dalam istilah sederhana?
- Intinya, ini adalah font dengan ikon yang dapat ditambahkan ke elemen halaman web apa pun untuk meningkatkan visibilitas dan desainnya. Koleksi ini terdiri dari beberapa ratus ikon yang cocok untuk tugas dan tujuan apa pun.Informasi lebih lanjut tentang tautan ini
Michel Pinson adalah penggemar perjalanan dan pembuat konten. Menggabungkan hasrat untuk pendidikan dan eksplorasi, ia berkomitmen untuk berbagi pengetahuan dan menginspirasi orang lain melalui konten pendidikan yang memikat. Membuat dunia lebih dekat bersama dengan memberdayakan individu dengan keahlian global dan rasa nafsu berkelana.
