Font Awesome 6: บทวิจารณ์ฉบับเต็ม
Font Awesome เป็นคอลเลกชันของไอคอนเวกเตอร์ที่ปรับขนาดได้ ไอคอนสามารถจัดรูปแบบโดยใช้คุณสมบัติ CSS ตั้งค่าสีขนาดเงาและอื่น ๆ อีกมากมาย ฟอนต์เวอร์ชัน 5.5.0 มีไอคอน 605
1 วิธีการติดตั้งตัวอักษรที่ยอดเยี่ยม
วิธีที่ 1.
ใช้ไฟล์ font-ewesome.css โดยเพิ่มรหัสต่อไปนี้ลงในไฟล์<head> ส่วน:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">เมื่อเชื่อมต่อแบบอักษรแล้วคุณสามารถใช้ไอคอนในเว็บไซต์ของคุณ
วิธีที่ 2.
ดาวน์โหลดแบบอักษรจาก Font Awesome แกะไฟล์เก็บถาวรและอัปโหลดสองโฟลเดอร์จากคลังเก็บไปยังเซิร์ฟเวอร์ไซต์ - CSS และแบบอักษร หากคุณมีโฟลเดอร์ที่มีชื่อดังกล่าวอยู่ในเว็บไซต์ของคุณคุณเพียงแค่ต้องเพิ่มไฟล์จากโฟลเดอร์ที่ดาวน์โหลดมา
คุณสามารถใช้ไฟล์เวอร์ชันเต็มหรือ minified:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 วิธีใช้ไอคอน Font Awesome
ไอคอนสามารถเพิ่มลงในเว็บเพจได้สองวิธี: โดยการตั้งค่าคลาสที่เหมาะสมสำหรับ<i> และ<span> elements, หรือby adding them to the desired element using the :before, :after pseudo-elements และthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: ก่อน {เนื้อหา: "\ f015";/ * เพิ่มไอคอนหน้าแรก */font-family: fontawesome; color: #aaaaaa; margin-right: 10px;}1 ไอคอนมาตรฐาน
Font Awesome ได้รับการออกแบบให้ใช้กับองค์ประกอบอินไลน์ ในการเพิ่มไอคอนก่อนอื่นคุณต้องตั้งค่าคลาส FA เป็น<i> หรือ<span> ธาตุ.
ในการเพิ่มไอคอนที่เลือกก่อนหรือหลังองค์ประกอบว่างเปล่า<i></i> หรือ<span></span> องค์ประกอบจะถูกเพิ่มเข้าไปในองค์ประกอบซึ่งได้รับการกำหนดคลาสไอคอนรวมถึงคลาสเพิ่มเติมที่ขยายสไตล์
<i class="fa fa-camera-retro"></i>2 ไอคอนขนาดใหญ่
เพื่อเพิ่มขนาดของไอคอนที่สัมพันธ์กับภาชนะให้ใช้ FA-LG (เพิ่มขึ้น 33%), 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 ไอคอนความกว้างคงที่
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation หรือlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> บ้าน</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> ห้องสมุด</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> แอปพลิเคชัน</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> การตั้งค่า</a ></li></ul>ไอคอน 4 รายการสำหรับรายการกระสุน
ใช้คลาส FA-UL และ FA-LI เพื่อแทนที่กระสุนเริ่มต้นใน a<ul>…</ul> รายการกระสุน
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>รายการ</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>รายการ</li> <li><i class="fa-li fa fa-square"></i>รายการ</li></ul>ไอคอนและคำพูด 5 กรอบ
Use the fa-border class to set the border for the icon. The pull-right และpull-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 In, Porta Sapien ใน Sed Elit Lectus Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien</p>ไอคอนภาพเคลื่อนไหว 6 ตัว
เพิ่ม FA-spin, FA-pulse, FA-refresh, คลาส FA-COG เพื่อตั้งค่าไอคอนการหมุน แอนิเมชั่นไม่ได้รับการสนับสนุนใน 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 ไอคอนแปลง
หากต้องการหมุนหรือพลิกไอคอนให้ใช้คลาส FA-Rotate-* และ 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 ไอคอนรวม
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, และfa-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 และcss code to insert using the content property
ไอคอนสำหรับเว็บแอปพลิเคชัน 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-EXPTY-\ F244;
FA-BATTERY-HALF-\ 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;
หากต้องการหมุนหรือพลิกไอคอนให้ใช้คลาส FA-Rotate-* และ FA-FLIP-*
4 ทรัพยากรที่เกี่ยวข้อง
นอกจากคอลเลกชัน Font Awesome แล้วคุณสามารถใช้แบบอักษรไอคอนอื่น ๆ ได้เช่นกัน
FontelloFontello มีชุดฟอนต์ไอคอนต่าง ๆ จำนวนมาก คุณสามารถเลือกไอคอนที่คุณชอบและดาวน์โหลดลงในคอมพิวเตอร์ของคุณ
ไอคอนพื้นฐานไอคอน Foundation เป็นคอลเล็กชั่นฟอนต์ไอคอนอีกตัวหนึ่งจากนักพัฒนาของ Foundation Framework นอกเหนือจากไอคอนมาตรฐานแล้วไซต์ยังมีไอคอนรอบไอคอนโซเชียลมีเดียและอื่น ๆ
ไอคอนวัสดุไอคอนวัสดุเป็นไอคอนแบนแบบครบวงจรของ Google ที่รวบรวมความสะดวกในการรับรู้ ไอคอนได้รับการปรับให้เหมาะสมสำหรับการแสดงผลที่สวยงามบนแพลตฟอร์มทั่วไปทั้งหมดและสำหรับความละเอียดของหน้าจอทั้งหมด
คอลเลกชันแบบอักษรไอคอนมีไอคอนมากกว่า 750 รายการ วิธีที่ง่ายที่สุดในการติดตั้งคอลเลกชันบนเว็บไซต์ของคุณคือการใช้ไอคอนเช่น Google Web Fonts ในการทำเช่นนี้รหัสต่อไปนี้จะรวมอยู่ในมาร์กอัปหน้า:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ในการแสดงแบบอักษรในเบราว์เซอร์อย่างถูกต้ององค์ประกอบที่จะใช้แบบอักษรไอคอนจะได้รับคลาสวัสดุ-ICONS:
.Material-ICONS {FONT-FAMILY: 'ไอคอนวัสดุ'; Font-Weight: แบบอักษรปกติ: ขนาดฟอนต์ปกติ: 24px; / * ขนาดไอคอนที่ต้องการ */ จอแสดงผล: inline-block; ความกว้าง: 1em; ความสูง: 1em; ความสูงบรรทัด: 1; การเปลี่ยนข้อความ: ไม่มี; การเว้นระยะห่างของตัวอักษร: Word-wrap ปกติ: ปกติ; Space White: Nowrap; ทิศทาง: ltr; -webkit-font-smoothing: antialiased; / * สนับสนุนโดยเบราว์เซอร์ WebKit ทั้งหมด */ การแสดงข้อความ: Optimizelegibility; / * การสนับสนุน Safari และ Chrome */ -moz-osx-font-smoothing: Grayscale; /* สนับสนุน Firefox */ Font-Feature-Settings: 'Liga'; /* คือการสนับสนุน */}ไอคอนเองถูกเพิ่มโดยใช้ไฟล์<I class=''material-ไอคอน''>รหัสมัดหรือ HTML ของไอคอน</i> แท็กตัวอย่าง:
<i class="material-ไอคอน">account_balance_wallet</i><i class="material-ไอคอน"></i>เบราว์เซอร์ที่ทันสมัยทั้งหมดเป็นที่เข้าใจกันทั้งหมดเช่นเริ่มต้นจากเวอร์ชัน 10 รหัสไอคอนถูกสร้างขึ้นโดยอัตโนมัติสำหรับสิ่งนี้คุณต้องคลิกซ้ายบนภาพไอคอนและคัดลอกรูปลักษณ์ที่แนะนำ
ขนาดไอคอน
ขนาดไอคอน is controlled by additional classes:
.Material-Imons.md-18 {font-size: 18px;} /* สำหรับ<i class="material-ไอคอน md-18"></i> */.Material-Imons.md-24 {font-size: 24px;} /* สำหรับ<i class="material-ไอคอน md-24"></i> */.Material-Imons.md-36 {font-size: 36px;} /* สำหรับ<i class="material-ไอคอน md-36"></i> */.Material-Imons.md-48 {font-size: 48px;} /* สำหรับ<i class="material-ไอคอน md-48"></i> */สีไอคอน
สีของไอคอนถูกตั้งค่าโดยใช้คลาสเพิ่มเติม:
.Material-ICONS.MD-DARK {COLOR: RGBA (0, 0, 0, 0.54);} /*<i class="material-ไอคอน md-dark"></i> */.Material-ICONS.MD-LIGHT {COLOR: RGBA (255, 255, 255, 1);} /*<i class="material-ไอคอน md-light"></i> */.Material-ICONS.MD-DARK.MD-Inactive {Color: RGBA (0, 0, 0, 0.26);} /*<i class="material-ไอคอน md-dark md-inactive"></i> * /.Material-ICONS.MD-LIGHT.MD-Inactive {Color: RGBA (255, 255, 255, 0.3);} /*<i class="material-ไอคอน md-light md-inactive">ใบหน้า</i> */ในการตั้งค่าสีที่กำหนดเองคุณต้องเพิ่มคลาสที่กำหนดสีของไอคอนตัวอย่างเช่น:
.Material-iCons.Indigo {color: #1a237e;} /*<i class="material-ไอคอน indigo"></i> */คำถามที่พบบ่อย
- แบบอักษรที่ยอดเยี่ยมในแง่ง่ายคืออะไร?
- ในสาระสำคัญมันเป็นตัวอักษรที่มีไอคอนที่สามารถเพิ่มลงในองค์ประกอบหน้าเว็บใด ๆ เพื่อปรับปรุงการมองเห็นและการออกแบบ คอลเลกชันประกอบด้วยไอคอนหลายร้อยไอคอนที่เหมาะสมสำหรับงานและวัตถุประสงค์ใด ๆข้อมูลเพิ่มเติมเกี่ยวกับลิงค์นี้
