การอ่านที่เกี่ยวข้อง:
คำอธิบายโดยละเอียดเกี่ยวกับไอคอน Flyphicons Bootstrap Glyphicons
ให้ฉันบอกคุณว่าไอคอนแบบอักษรคืออะไร?
ไอคอนแบบอักษรเป็นแบบอักษรไอคอนที่ใช้ในโครงการเว็บ แม้ว่า Glyphicons Halflings ต้องการใบอนุญาตเชิงพาณิชย์ แต่คุณสามารถใช้ไอคอนเหล่านี้ได้ฟรีกับ bootstrap ตามโครงการ
เพื่อแสดงความขอบคุณต่อผู้เขียนไอคอนฉันหวังว่าคุณจะเพิ่มลิงค์ไปยังเว็บไซต์ Glyphicons เมื่อใช้งาน
ฉันใช้ bootstrap มาเป็นเวลานานและไอคอน glyphics ในตัวก็เพียงพอที่จะตอบสนองความต้องการของโครงการขนาดเล็ก คุณจะต้องใช้สไตล์เดียวเพื่อนำไอคอนขึ้นมา แม้ว่ามันจะรู้สึกน่าทึ่ง แต่ฉันไม่เคยวิเคราะห์ว่ามันใช้งานได้อย่างไร หลังจากค้นหาอิเล็กโทรดที่เกี่ยวข้องผ่านเครื่องมือนักพัฒนาโครเมี่ยมฉันได้เรียนรู้ว่าเขาใช้เทคโนโลยีองค์ประกอบหลอก CSS
<span> </span>
. Glyphicons กำหนดรูปแบบของแบบอักษรไอคอนกลีฟีคอนทั้งหมด
.glyphicons {ตำแหน่ง: ญาติ; ด้านบน: 1px; แสดง: inline-block; font-family: 'glyphicons halflings'; font-style: ปกติ; font-weight: 400; leight line: 1; -webkit-font-smoothing:}}}เนื้อหาที่แสดงถูกกำหนดโดยคลาสย่อยที่กำหนดโดยคลาสอื่นเช่น: glyphicon-eur: ก่อนหน้า
.glyphicon-eur: ก่อนหน้า,. glyphicon-euro: ก่อน {เนื้อหา: "/20ac";}เมื่อมองผ่านเอกสารฉันพบว่านอกเหนือจาก: ก่อน (การใช้งาน CSS2: เพิ่มเนื้อหาก่อนองค์ประกอบ) มี: ตัวอักษรตัวแรก (การใช้งาน CSS1 เพิ่มสไตล์พิเศษลงในตัวอักษรตัวแรกของข้อความที่ใช้งานได้ องค์ประกอบ).
เมื่อคุณเข้าใจหลักการรหัสจะง่าย รหัสเฉพาะมีดังนี้:
<! doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <title> ตัวอย่างของ miaoqiyuan.cn </title> Yahei ';}. คอนเทนเนอร์ {พื้นหลัง: #FFF; ความกว้าง: 800PX; ระยะขอบ: 50px auto; ชายแดน: ของแข็ง 1px#0096d7; ชายแดน-ราดอุดิอัส: 10px;}. คอนเทนเนอร์ H2 {font-size: 16px; 15px;}. คอนเทนเนอร์ h2 a {color: #fff;}. คอนเทนเนอร์ ul {list-style: none; padding: 0; margin: 0;} ul.me {padding: 5px;} ul.me li {margin: 5px 10px; #DDD; Border-Radius: 10px;}. font-icon: ก่อนหน้า, .font-icon: หลังจาก {font-family: 'Impact'; font-size: 16px; สี:#0096d7; padding: 4px 6px; องค์ประกอบหลอกไม่มีผลต่อองค์ประกอบ สไตล์*/. font-icon {color:#090; font-family: 'Airal';}. เว็บ: ก่อน {เนื้อหา: 'home';}. qq: ก่อน {content: 'qq';}. wechat: ก่อน {content: 'wechat'; สี:#090; Ore {color:#c00;} H2: ตัวอักษรตัวแรก {font-size: 20px; color:#c00;}. แชท: หลังจาก {content: 'chatme!'; พื้นหลัง: #fdc; สี:#d76900; สีชายแดน:#d76900; <a href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/"> bootstrap glyphicons วิธีการใช้วิธี </a> </h2> http://www.miaoqiyuan.cn/</li><!-- ใส่เอฟเฟกต์ภายใน-> <li> <pan> </span> mqycn2 </li> <! Internals-> <li> <span> </span> mqycn2 </li> <!-วิธีไกลฟิคอน-> <li> <pan> 77068320 1301425789 </span> <pan> </span> <! วิธีการ-> <li> <pan> 77068320 1301425789 </span> <span> </span> <!-ใส่เอฟเฟกต์ใน internals-> <li> <pan> </pan> <!-วางด้านหน้าและด้านหลังของวิธี glyphicons-> <li> <li> ด้านหน้าและด้านหลังของวิธี Glyphicons-> <li> <pan> 77068320 1301425789 </span> <span> </span> </li> <!-ใส่เอฟเฟกต์ในภายใน-ใส่เอฟเฟกต์ภายในและรูปแบบการซ้อนทับ การตั้งค่าหลังจะเขียนทับการตั้งค่าก่อนหน้านี้-> <li> <pan> mqycn2 </span> </li> </ul> </div> </div> </body> </html>วิธีการใช้งานไอคอนแบบอักษร Bootstrap Glyphicons ที่ตัวแก้ไขแนะนำให้คุณสิ้นสุดลง หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับทุกคนในเวลา!