Bootstrap 3.0'da glificonlar nasıl kullanılır

Bootstrap 2.3'te zaten glifikonlar kullandım, ancak şimdi bootstrap 3.0'a yükselttim. Şimdi, icon özelliğini kullanamıyorum.

Bootstrap 2.3'te aşağıdaki etiket çalışıyor

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

Bootstrap 3.0'da çalışmıyor.

Simgeleri (glyphicons) artık bir içerdiği ayrı css dosyası .. .

Biçimlendirme şu şekilde değişti:

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

veya

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

Bootstrap 3 için faydalı bir değişiklik listesi: http://bootply.com/bootstrap-3-migration-guide

İşte gidiyorsun:

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

Daha fazla bilgi:

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

Btw. bu dönüştürme aracını kullanabilirsiniz , bu aynı zamanda simgelerin kodunu da güncelleyecektir:

Özelleştirilmiş bir bootstrap 3 dağıtımı indirmezseniz şunları yapmanız gerekir:

1. Tam dağıtımı https://github.com/twbs/bootstrap/archive/v3.0.0.zip adresinden indirin
2. Sıkıştırılmış klasörü fontsaçın ve bootstrap dizininize çağrılan tüm klasörü yükleyin . Diğer klasörler "css, js" ile bir araya getirin.

Önceki Örnek:

\css
\js
index.html

Yüklemeden Sonra Örnek:

\css
\fonts
\js
index.html

Daha az kullanıyorsanız ve simge yazı tipini yüklemiyorsa, yazı tipi yolunu kontrol etmelisiniz değişken.less dosyasına gidin ve benim için işe yarayan @ icon-font-path yolunu değiştirin .

Bootstrap 3, span etiketi gerektirir, i değil

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

Yazı tiplerini dahil et Tüm yazı tipi dosyalarını CSS'nizin yakınındaki bir / fonts dizinine kopyalayın.

1. CSS veya LESS'i dahil edin Projenizdeki yazı tiplerini etkinleştirmek için iki seçeneğiniz vardır: vanilya CSS veya kaynak LESS. Vanilya CSS için, havuzdaki / css'den derlenmiş CSS dosyasını dahil etmeniz yeterlidir.
2. LESS için, .less dosyalarını / less'dan mevcut Bootstrap dizininize kopyalayın . Sonra içe bootstrap.less yoluyla @import "önyükleme-glyphicons.less"; . Hazır olduğunuzda yeniden derleyin.
3. Bazı simgeler ekleyin! Yazı tiplerini ve CSS'yi ekledikten sonra simgeleri kullanmaya başlayabilirsiniz. Örneğin,<span class="glyphicon glyphicon-ok"></span>

kaynak

Uygulamanızı oluşturmak için grunt kullanıyorsanız, oluşturma sırasında yolların değişmesi mümkündür. Bu durumda grunt dosyanızı şu şekilde değiştirmeniz gerekir:

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üm dosyaları bootstrap'tan indirin ve ardından bu css'yi ekleyin

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

Bu yardımcı olabilir. Anlamakta faydalı olacak birçok örnek içermektedir.

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