Font Awesome 6: Ulasan Penuh
- 1 Cara Memasang Font Awesome
- Kaedah 1.
- Kaedah 2.
- 2 Cara Menggunakan Ikon Awesome Font
- 1 ikon standard
- 2 ikon besar
- 3 ikon lebar tetap
- 4 ikon untuk senarai bulleted
- 5 ikon dan petikan berbingkai
- 6 ikon animasi
- 7 Ikon yang diubah
- 8 Ikon Gabungan
- 3 Font Awesome 4.5.0 collection, classes dancss code to insert using the content property
- 4 sumber yang berkaitan
- Saiz ikon
- Warna ikon
- Soalan Yang Sering Ditanya
Font Awesome adalah koleksi ikon vektor berskala. Ikon boleh diformat menggunakan sifat CSS, menetapkan warna, saiz, bayang -bayang dan banyak lagi. Font versi 5.5.0 termasuk 605 ikon.
1 Cara Memasang Font Awesome
Kaedah 1.
Gunakan versi fon-awesome.css fail dengan menambahkan kod berikut ke<head> Seksyen:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Setelah fon disambungkan, anda boleh menggunakan ikon di laman web anda.
Kaedah 2.
Muat turun fon dari font hebat . Buka arkib dan muat naik dua folder dari arkib ke pelayan tapak - CSS dan fon. Jika anda sudah mempunyai folder dengan nama tersebut di laman web anda, maka anda hanya perlu menambah fail dari folder yang dimuat turun kepada mereka.
Anda boleh menggunakan versi fail penuh atau minified:
<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 Awesome Font
Ikon boleh ditambah ke laman web dalam dua cara: dengan menetapkan 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 {kandungan: "\ f015";/ * tambah ikon rumah */font-family: fontawesome; warna: #aaaaaa; margin-right: 10px;}1 ikon standard
Font Awesome direka untuk digunakan dengan elemen sebaris. Untuk menambah ikon, anda perlu menetapkan kelas FA terlebih dahulu ke<i> atau<span> elemen.
Untuk menambah ikon yang dipilih sebelum atau selepas elemen, kosong<i></i> atau<span></span> Elemen ditambah kepada elemen, yang diberikan kelas ikon, serta kelas tambahan yang memanjangkan gaya.
<i class="fa fa-camera-retro"></i>2 ikon besar
Untuk meningkatkan saiz ikon berbanding dengan bekasnya, gunakan FA-LG (kenaikan 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> Tetapan</a ></li></ul>4 ikon untuk senarai bulleted
Gunakan kelas FA-UL dan FA-LI untuk menggantikan peluru lalai di a<ul>…</ul> Senarai Bulleted.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Senaraikan item</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Senaraikan item</li> <li><i class="fa-li fa fa-square"></i>Senaraikan item</li></ul>5 ikon dan petikan 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 Sit Amet, Consectetur Adipiscing Elit. Donec Nec Purus Congue, POSUERE Libero, Porta Sapien. Dalam Lectus Sed Elit. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 ikon animasi
Tambah kelas FA-Spin, FA-Pulse, FA-Refresh, FA-COG untuk menubuhkan ikon berputar. Animasi tidak disokong dalam 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 flip 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 Gabungan
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 -ATTERISK - \ F069;
Faat - \ f1fa;
FA-Balance-Scale-\ f24e;
FA -BAN - \ F05E;
FA -BANK - \ F19C;
FA -barcode - \ f02a;
FA-battery-empty-\ f244;
Fa-battery-half-\ f242;
FA-Battery-Quarter-\ F243;
FA-battery-tiga-kuarters-\ f241;
Fa-battery-full-\ f240;
FA -katil - \ f236;
Fa -beer - \ f0fc;
FA -Bell - \ f0f3;
FA-Bell-Slash-\ f1f6;
FA -BINOCULARS - \ F1E5;
FA-Birthday-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bom - \ f1e2;
Fa -book - \ f02d;
Untuk memutar atau flip ikon, gunakan kelas FA-Rotate-* dan FA-Flip-*.
4 sumber yang berkaitan
Sebagai tambahan kepada koleksi Font Awesome, anda boleh menggunakan fon ikon lain juga.
Fontello.Fontello mempunyai koleksi besar pelbagai fon ikon. Anda boleh memilih ikon yang anda suka dan memuat turunnya ke komputer anda.
Ikon Yayasan.Ukon Yayasan %% %% adalah satu lagi koleksi font ikon dari pemaju rangka asas. Sebagai tambahan kepada ikon standard, laman web ini mempunyai ikon bulat, ikon media sosial, dan banyak lagi.
Ikon Bahan.Ikon bahan adalah ikon rata bersatu Google yang merangkumi kemudahan persepsi. Ikon dioptimumkan untuk paparan yang indah di semua platform biasa dan untuk semua resolusi skrin.
Koleksi Font Ikon mengandungi 750+ ikon. Cara paling mudah untuk memasang koleksi di laman web anda adalah dengan menggunakan ikon seperti Google Web Font. Untuk melakukan ini, kod berikut dimasukkan ke dalam markup halaman:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Untuk memaparkan fon dengan betul dalam penyemak imbas, elemen yang akan menggunakan fon ikon diberikan kelas material-icon:
.material-ikon {font-family: 'icon material'; Font-Weight: gaya font biasa: saiz font biasa: 24px; / * Saiz ikon pilihan */ paparan: inline-block; lebar: 1em; Ketinggian: 1em; ketinggian garis: 1; Teks-transform: Tiada; Surat-Spacing: Word-Wrap Normal: Normal; ruang putih: nowrap; Arah: LTR; -WebKit-Font-Smoothing: Antialiased; / * Disokong oleh semua pelayar WebKit */ pengubah teks: Optimizelegibility; / * Safari dan Sokongan Chrome */ -Moz-Osx-Font-Smoothing: Grayscale; /* Sokongan Firefox. */ Font-Feature-Settings: 'Liga'; /* IE SOKONGAN. */}Ikon itu sendiri ditambah menggunakan<I class=''material-ikon''>ligatur atau kod html ikon</i> Tag, sebagai contoh:
<i class="material-ikon">account_balance_wallet</i><i class="material-ikon"></i>Ligatur difahami oleh semua pelayar moden, iaitu - bermula dari versi 10. Kod ikon dijana secara automatik, untuk ini anda perlu klik kiri pada imej ikon dan menyalin rupa yang dicadangkan.
Saiz ikon
Saiz 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 ditetapkan menggunakan kelas tambahan:
.material-ikon.md-dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-ikon md-dark"></i> */.material-ikon.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-ikon md-light"></i> */.material-ikon.md-dark.md-inactive {color: rgba (0, 0, 0, 0.26);} /*<i class="material-ikon md-dark md-inactive"></i> * /.material-ikon.md-light.md-inactive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-ikon md-light md-inactive">muka</i> */Untuk menetapkan warna tersuai, anda perlu menambah kelas yang mentakrifkan warna ikon, sebagai contoh:
.material-ikon.indigo {color: #1a237e;} /*<i class="material-ikon indigo"></i> */Soalan Yang Sering Ditanya
- Apakah fon hebat dalam istilah mudah?
- Pada dasarnya, ia adalah fon dengan ikon yang boleh ditambah ke mana -mana elemen laman web untuk meningkatkan keterlihatan dan reka bentuknya. Koleksi ini terdiri daripada beberapa ratus ikon yang sesuai untuk sebarang tugas dan tujuan.Maklumat lanjut mengenai pautan ini
Michel Pinson adalah peminat perjalanan dan pencipta kandungan. Menggabungkan keghairahan untuk pendidikan dan penerokaan, beliau adalah untuk berkongsi pengetahuan dan memberi inspirasi kepada orang lain melalui kandungan pendidikan yang menawan. Membawa dunia lebih dekat bersama dengan memperkasakan individu dengan kepakaran global dan rasa bersemangat.
