ไอคอนตัวอักษรบูต (Glyphicons)

บทนี้จะอธิบายไอคอนตัวอักษร (Glyphicons) และตัวอย่างบางส่วนที่จะเข้าใจการใช้งาน รูปแบบตัวอักษรที่มาพร้อมกับเงินทุนกว่า 200 ร่ายมนตร์ แรกให้เราแรกเข้าใจสิ่งที่เป็นไอคอนแบบอักษร

อะไรคือสิ่งที่ไอคอนตัวอักษร?

ไอคอนแบบอักษรเป็นตัวอักษรไอคอนใช้ในโครงการเว็บ แม้ว่า ฮาล์ฟลิง Glyphicons จำเป็นต้องมีใบอนุญาตการค้า แต่คุณสามารถขึ้นอยู่กับโครงการเงินทุนเพื่อการใช้งานฟรีไอคอนเหล่านี้

เพื่อแสดงความกตัญญูผู้เขียนไอคอนฉันหวังว่าคุณเพิ่มการเชื่อมโยงเว็บไซต์ GLYPHICONS ระหว่างการใช้งาน

ได้รับไอคอนแบบอักษร

เรามี การติดตั้งสภาพแวดล้อม บทดาวน์โหลดรุ่น 3.x เงินทุนและทำความเข้าใจโครงสร้างไดเรกทอรีในแบบอักษรที่ไอคอนโฟลเดอร์สามารถหาตัวอักษรที่มีไฟล์เหล่านี้ต่อไปนี้:

• glyphicons-ฮาล์ฟลิง-regular.eot
• glyphicons-ฮาล์ฟลิง-regular.svg
• glyphicons-ฮาล์ฟลิง-regular.ttf
• glyphicons-ฮาล์ฟลิง-regular.woff

กฎระเบียบที่เกี่ยวข้อง CSS เขียนในโฟลเดอร์DISTCSSbootstrap.cssโฟลเดอร์และบูต-min.css ในไฟล์

รายการไอคอนแบบอักษร

คลิกที่นี่เพื่อดูรายการสินค้าจากไอคอนแบบอักษร

การตีความ CSS ของกฎ

กฎ CSS ต่อไปนี้ถือว่าระดับ glyphicon

@ font-face {
  font-family: 'Glyphicons ฮาล์ฟลิง';
  src: URL ( 'แบบอักษร ../ / glyphicons-ฮาล์ฟลิง-regular.eot');
  src: URL ( '../ #iefix อักษร / glyphicons-ฮาล์ฟลิง-regular.eot?) รูปแบบ (แบบฝังตัว OpenType') URL ( '../ อักษร / glyphicons-ฮาล์ฟลิง-regular.woff') รูปแบบ ( 'WOFF') URL ( 'แบบอักษร ../ / glyphicons-ฮาล์ฟลิง-regular.ttf') รูปแบบ (TrueType ') URL (' แบบอักษร ../ / glyphicons-ฮาล์ฟลิง-regular.svg # glyphicons_halflingsregular ') รูปแบบ ( 'SVG');
}

.glyphicon {
  ตำแหน่ง: ญาติ;
  ด้านบน: 1px;
  จอแสดงผล: อินไลน์บล็อก
  font-family: 'Glyphicons ฮาล์ฟลิง';
  -webkit-Font-เรียบ: antialiased;
  ตัวอักษรสไตล์: ปกติ;
  font-weight: ปกติ;
  line-height: 1;
  -moz-OSX Font-เรียบเนียนสีเทา;
}

ดังนั้นกฎ font-face ในความเป็นจริงสถานที่ที่พบ glyphicons ประกาศ font-family สถานที่ตั้ง

ระดับ .glyphicon ประกาศตำแหน่งสัมพัทธ์ชดเชยจากด้านบนของ 1px ที่แสดงผลเป็นแบบอินไลน์บล็อกแบบอักษรคำสั่งให้นำบทบัญญัติตัวอักษรรูปแบบและ font-weight เป็นปกติตั้งค่าความสูงของแถว 1 นอกจากนี้การใช้ -webkit-อักษรเรียบเนียนและ antialiased -moz-OSX Font-เรียบเนียน สีเทา; ได้รับความสอดคล้องข้ามเบราว์เซอร์

แล้วที่

.glyphicon: {ที่ว่างเปล่า
  ความกว้าง: 1em;
}

glyphicon ที่ว่างเปล่า

มี 200 ชั้นแต่ละชั้นมีไอคอน ระดับรูปแบบเหล่านี้ร่วมกันจะเป็นดังนี้:

.glyphicon คำหลัก: {ก่อน
  เนื้อหา: "hexvalue";
}

ตัวอย่างเช่นผู้ใช้ไอคอนที่จะใช้มันเป็นระดับดังนี้

.glyphicon ผู้ใช้: ก่อน {
  เนื้อหา: "\ e008";
}

การใช้

หากต้องการใช้ไอคอนเพียงแค่ใช้รหัสต่อไป กรุณาเก็บพื้นที่ที่เหมาะสมระหว่างไอคอนและข้อความ

<ระดับ Span = "glyphicon glyphicon ค้นหา"> </ span>

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้ไอคอนแบบอักษร:

ผลมีดังนี้

ไอคอนตัวอักษรที่มีแถบนำทาง

ไอคอนที่กำหนดเองแบบอักษร

เราได้เห็นวิธีการใช้ไอคอนแบบอักษรแล้วเรามาดูวิธีการปรับแต่งไอคอนตัวอักษร

เราจะเริ่มต้นตัวอย่างข้างต้นโดยการเปลี่ยนขนาดตัวอักษรสีและใช้เงาข้อความที่จะปรับแต่งไอคอน

นี่คือรหัสเริ่มต้น:

<ชนิดปุ่ม = "ปุ่ม" class = "btn BTN หลัก BTN-LG">
  <span class = "glyphicon glyphicon ผู้ใช้"> </ span> ผู้ใช้
</ ปุ่ม>

ผลจะเป็นดังนี้:

ขนาดตัวอักษรที่กำหนดเอง

โดยการเพิ่มหรือลดขนาดตัวอักษรของไอคอนคุณสามารถทำให้ไอคอนปรากฏมีขนาดใหญ่หรือเล็ก

<ชนิดปุ่ม = "ปุ่ม" class = "btn BTN หลัก BTN-LG" style = "font-size: 60px">
  <span class = "glyphicon glyphicon ผู้ใช้"> </ span> ผู้ใช้
</ ปุ่ม>

สีตัวอักษรที่กำหนดเอง

<ชนิดปุ่ม = "ปุ่ม" class = "btn BTN หลัก BTN-LG" style = "สี: rgb (212, 106, 64);">
  <span class = "glyphicon glyphicon ผู้ใช้"> </ span> ผู้ใช้
</ ปุ่ม>

สมัครเงาข้อความ

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

ไอคอนอักษรที่กำหนดเองออนไลน์

คลิกที่นี่เพื่อปรับแต่งไอคอนตัวอักษร >>

ไอคอนรายการ