วิธีใช้ Glyphicons ใน Bootstrap 3.0

ฉันใช้ glyphicons ใน bootstrap 2.3 แล้ว แต่ตอนนี้ฉันได้อัปเกรดเป็น bootstrap 3.0 แล้ว ตอนนี้ฉันไม่สามารถใช้คุณสมบัติไอคอนได้

ใน bootstrap 2.3 แท็กด้านล่างใช้งานได้

<i class="icon-search"></i>

ใน bootstrap 3.0 มันไม่ทำงาน

ไอคอน (glyphicons) ที่มีอยู่ในขณะนี้ในไฟล์ CSS แยกต่างหาก ..

มาร์กอัปเปลี่ยนเป็น:

<i class="glyphicon glyphicon-search"></i>

หรือ

<span class="glyphicon glyphicon-search"></span>

นี่คือรายการการเปลี่ยนแปลงที่เป็นประโยชน์สำหรับ Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

ไปเลย:

<i class="glyphicon glyphicon-search"></i>

ข้อมูลมากกว่านี้:

http://getbootstrap.com/components/#glyphicons

Btw. คุณสามารถใช้เครื่องมือการแปลงนี้ซึ่งจะอัปเดตรหัสสำหรับไอคอน:

หากคุณไม่ดาวน์โหลด bootstrap 3 distro ที่กำหนดเองคุณต้อง:

1. ดาวน์โหลด distro ฉบับเต็มจาก https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. ยกเลิกการบีบอัดและอัปโหลดโฟลเดอร์ทั้งหมดที่เรียกfontsไปยังไดเรกทอรี bootstrap ของคุณ รวมกับโฟลเดอร์อื่น ๆ "css, js"

ตัวอย่างก่อน:

\css
\js
index.html

ตัวอย่างหลังการอัปโหลด:

\css
\fonts
\js
index.html

หากคุณใช้งานน้อยลงและไม่ได้โหลดแบบอักษรไอคอนคุณต้องตรวจสอบเส้นทางแบบอักษรไปที่ไฟล์variable.lessและเปลี่ยนเส้นทาง@ icon-font-pathซึ่งเหมาะกับฉัน

Bootstrap 3 ต้องการสแปนแท็กไม่ใช่ i

<span class="glyphicon glyphicon-search"></span>`

รวมฟอนต์คัดลอกไฟล์ฟอนต์ทั้งหมดไปยังไดเร็กทอรี / ฟอนต์ใกล้ CSS ของคุณ

1. รวม CSS หรือ LESS คุณมีสองตัวเลือกในการเปิดใช้งานฟอนต์ในโปรเจ็กต์ของคุณ: vanilla CSS หรือ source LESS สำหรับ vanilla CSS เพียงรวมไฟล์ CSS ที่คอมไพล์แล้วจาก/ cssในที่เก็บ
2. สำหรับ LESS ให้คัดลอกไฟล์ . lessจาก/ lessไปยังไดเร็กทอรี Bootstrap ที่คุณมีอยู่ จากนั้นนำเข้าสู่bootstrap.lessผ่านทาง@import "bootstrap-glyphicons.less";. รวบรวมใหม่เมื่อพร้อม
3. เพิ่มไอคอน! หลังจากคุณเพิ่มแบบอักษรและ CSS แล้วคุณสามารถใช้ไอคอนได้ ตัวอย่างเช่น,<span class="glyphicon glyphicon-ok"></span>

แหล่งที่มา

หากคุณใช้คำรามในการสร้างแอปพลิเคชันของคุณอาจเป็นไปได้ว่าในระหว่างการสร้างเส้นทางจะเปลี่ยนไป ในกรณีนี้คุณต้องแก้ไขไฟล์ฮึดฮัดของคุณดังนี้:

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },

ดาวน์โหลดไฟล์ทั้งหมดจาก bootstrap จากนั้นรวม css นี้

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

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

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp