Cách sử dụng glyphicons trong bootstrap 3.0

Tôi đã sử dụng glyphicons trong bootstrap 2.3 nhưng bây giờ tôi đã nâng cấp lên bootstrap 3.0. Bây giờ, tôi không thể sử dụng thuộc tính biểu tượng.

Trong bootstrap 2.3, thẻ bên dưới đang hoạt động

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

Trong bootstrap 3.0, nó không hoạt động.

Các biểu tượng (glyphicons) bây giờ được chứa trong một tập tin css riêng .. .

Đánh dấu đã thay đổi thành:

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

hoặc là

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

Dưới đây là danh sách các thay đổi hữu ích cho Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Đây là bạn:

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

Thêm thông tin:

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

Btw. bạn có thể sử dụng công cụ chuyển đổi này , công cụ này cũng sẽ cập nhật mã cho các biểu tượng:

Nếu bạn tải xuống bản phân phối bootstrap 3 tùy chỉnh, bạn phải:

1. Tải xuống bản phân phối đầy đủ từ https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Giải nén và tải lên toàn bộ thư mục được gọi fontsvào thư mục bootstrap của bạn. Đặt cùng với các thư mục khác "css, js".

Ví dụ trước:

\css
\js
index.html

Ví dụ Sau khi Tải lên:

\css
\fonts
\js
index.html

Nếu bạn đang sử dụng ít hơn và nó không tải được phông chữ biểu tượng, bạn phải kiểm tra đường dẫn phông chữ đi đến tệp variable.less và thay đổi đường dẫn @ icon-font- path, cách đó phù hợp với tôi.

Bootstrap 3 yêu cầu thẻ span không phải tôi

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

Bao gồm các phông chữ Sao chép tất cả các tệp phông chữ vào một thư mục / phông chữ gần CSS của bạn.

1. Bao gồm CSS hoặc LESS Bạn có hai tùy chọn để bật các phông chữ trong dự án của mình: CSS vani hoặc nguồn LESS. Đối với CSS vani, chỉ cần đưa tệp CSS đã biên dịch từ / css vào kho lưu trữ.
2. Đối với LESS, hãy sao chép các tệp .less từ / less vào thư mục Bootstrap hiện có của bạn. Sau đó nhập nó vào bootstrap.less thông qua @import "bootstrap-glyphicons.less"; . Biên dịch lại khi đã sẵn sàng.
3. Thêm một số biểu tượng! Sau khi bạn đã thêm phông chữ và CSS, bạn có thể sử dụng các biểu tượng. Ví dụ,<span class="glyphicon glyphicon-ok"></span>

nguồn

Nếu bạn đang sử dụng grunt để xây dựng ứng dụng của mình, có thể trong quá trình xây dựng, các đường dẫn đã thay đổi. Trong trường hợp này, bạn cần sửa đổi tệp grunt của mình như sau:

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
            }]
        }
    },

Tải xuống tất cả các tệp từ bootstrap và sau đó bao gồm css này

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

Điều này có thể giúp. Nó chứa nhiều ví dụ sẽ hữu ích trong việc hiểu.

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