Bootstrap 3 Glifonları çalışmıyor

Bootstrap 3.0'ı indirdim ve glifonları çalıştıramadım. Bir çeşit "E003" hatası alıyorum. Bunun neden olduğu hakkında bir fikrin var mı? Hem yerel hem de çevrimiçi olarak denedim ve hala aynı sorunu alıyorum.

Aynı sorunu yaşıyordum ve bu sayfadaki gizli yorumlar dışında herhangi bir bilgi bulamadım. Yazı tipi dosyalarım Chrome'a ​​göre iyi yükleniyordu, ancak simgeler düzgün görüntülenmiyordu. Bunu cevaplıyorum, umarım başkalarına yardımcı olur.

Bootstrap 3'ün özelleştirici aracından indirdiğim yazı tipi dosyalarıyla ilgili bir sorun vardı. Doğru yazı tiplerini edinmek için, Bootstrap ana sayfasına gidin ve tam .zip dosyasını indirin. Dört yazı tipi dosyasını oradan yazı tipi dizininize çıkarın ve her şey işe yarayacaktır.

Okuyucular için not: @ user2261073'ün yorumunu ve @ Jeff'in özelleştiricideki bir hatayla ilgili cevabını mutlaka okuyun . Muhtemelen sorunun nedeni budur.

Yazı tipi dosyası düzgün yüklenmiyor. Dosyaların beklenen konumlarında olup olmadığını kontrol edin.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Daniel tarafından belirtildiği gibi, aynı zamanda bir mime türü sorunu da olabilir. Chrome'un geliştirici araçları, indirilen yazı tiplerini ağ sekmesinde gösterir:

Benim durumumda glificons-halflings-regular.woff ve mobil tarayıcılarda görünmeyen glificons için 404 alıyordum .

Woff için MIME türü hakkında bazı karışıklıklar var gibi görünüyor, farklı tarayıcılar tarafından birden fazla MIME türü kabul ediliyor, ancak W3C diyor ki :

application/font-woff

Düzenleme: Woff için aşağıdaki MIME türünü test ettikten sonra şu anda tüm tarayıcılarda çalışır:

application/x-font-woff

Düzenleme: Şu anda Bootstrap'ın son sürümü (3.3.5) .woff ile aynı başlangıç ​​sonucuna sahip .woff2 yazı tiplerini kullanır, W3C hala spesifikasyonu tanımlar, ancak şu anda MIME türü gibi görünüyor:

application/font-woff2

-Yüksek puanlı cevabı takip ettiyseniz ve hala çalışmıyorsa :

FontKlasör GEREKİR CSS klasör olarak aynı seviyede olacak. Yolu Tespit bootstrap.css olmaz çalışır.

Bootstrap.cssaşağıdaki gibi Fontsklasöre gitmelidir :

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Diğer çözümler çalışmıyorsa, sizin için her şeyi yapmak için Bootstrap'e güvenmek yerine Glifonları harici bir kaynaktan içe aktarmayı deneyebilirsiniz. Bunu yapmak için:

Bunu HTML'de yapabilirsiniz:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Veya CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Bu konudan edsiofi'ye kredi: Bootstrap 3 Glyphicons CDN

Başka birinin buraya gelip Bootstrap> = v4.0 kullanması durumunda: glyphicon desteği bırakılır

Sürüm notlarındaki ilgili bölüm:

Glificons simge yazı tipini düşürdü. Simgelere ihtiyacınız varsa, bazı seçenekler şunlardır:

Glyphicons'un akış yukarı sürümü

Octicons

Harika Yazı Tipi

Kaynak: https://v4-alpha.getbootstrap.com/migration/#components

Glifikon kullanmak istiyorsanız, ayrı olarak indirmeniz gerekir.

Şahsen Font Awesome denedim ve oldukça iyi. Simge eklemek, glpicon yöntemine benzer:

<i class="fas fa-chess"></i>

Bu eski soruya bakıyordum ve şimdiye kadar doğru cevap olması gereken şey, yorumlarda tarafımdan verildiğinden, bunun için de krediyi hak ettiğimi düşünüyorum.

Sorun , bootstrap'ın özelleştirici aracından indirilen glyphicon yazı tipi dosyalarının, bootstrap'ın ana sayfasında bulunan yeniden yönlendirmeden indirilenlerle aynı olmaması gerçeğinden kaynaklandı. Gerektiği gibi çalışanlar, aşağıdaki bağlantıdan indirilebilenlerdir:

http://getbootstrap.com/getting-started/#download

Eski bozuk özelleştirici dosyalarıyla sorun yaşayan herkes yukarıdaki bağlantıdan yazı tiplerinin üzerine yazmalıdır.

Azure Web Siteleri eksik woff MIME yapılandırması. Web.config dosyasına aşağıdaki girdiyi eklemelisiniz

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

@Stijn'de açıklandığı gibi, Bootstrap.cssbu paket yüklenirken varsayılan konum yanlış Nuget.

Bu bölümü aşağıdaki gibi görünecek şekilde değiştirin:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Bu kod satırını ekleyebilir ve tamamlayabilirsiniz.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Teşekkürler.

IIS .woffdosyaları varsayılan olarak sunucuya vermeyecektir , bu nedenle IIS'de dosyanıza bir <mimeMap>girdi eklemeniz gerekir web.config;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Yazı tipi dizininizde aşağıdaki dosyaların tümü var mı?

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Daha az değişkenimi değiştirdim.

@icon-font-path:          "fonts/";    

orijinal

@icon-font-path:          "../fonts/"; 

Bir soruna neden oluyordu

Bunun nedeni bootstrap.css ve bootstrap.min.css dosyalarındaki yanlış kodlamadır. Özelleştirici'den Bootstrap 3.0'ı indirdiğinizde aşağıdaki kod eksik:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Bu Glificons kullanmak için ana kod olduğundan, ofc çalışmaz ...

Tam paketten css dosyalarını indirin ve bu kod uygulanacaktır.

Simgelerin benim için görünmemesinin nedeni buydu:

* {
    arial, sans-serif !important;
}

Bu parçamı çıkardıktan sonra CSS, her şey olması gerektiği gibi çalıştı. Önemli olan, soruna neden olan şeydi.

Başka bir sorun / çözüm bu Bootstrap 2.x koduna sahip olabilir:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

ve kılavuza ( .icon-* ---> .glyphicon .glyphicon-*) göre geçiş yaparken :

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

icon sınıfını (font referansını içeren) eklemeyi unutmayın:

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Aşağıda benim için sabit olan şey. Firebug konsolunda "kötü URI" hatası alıyordum. Simgeler E ### sayıları olarak gösteriliyordu. 'Fonts' dizinime bir .htaccess dosyası eklemek zorunda kaldım. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Olası kopya: Firefox'ta indirilebilir yazı tipi: hatalı URI veya siteler arası erişime izin verilmiyor

Bu çok uzun bir çekim, ama benim durumumdu ve zaten burada olmadığı için.

Twitter Bootstrap'ı SASS'tan gulp-sassveya grunt-sassie kullanarak derliyorsanız . node-sass. Özellikle oldukça eski bir proje üzerinde çalışıyorsanız, düğüm modüllerinizin güncel olduğundan emin olun.

Bir süre önce SASS direktifinin glifikon @at-roottanımında kullanıldığı @font-faceanlaşılmaktadır, bkz. Https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/nsscss .

Burada lazım node-sassyani. çok eski libsassise @at-rootyönergeyi desteklemeyin . Bu durumda , tarayıcının ne yapacağıyla ilgili hiçbir fikri olmayan bir @font-facepaket alırsınız @at-root. Bunun sonucu olarak hiçbir font indirilmeyecek ve büyük olasılıkla simgeler yerine çöp göreceksiniz.

Not: Aşağıda muhtemelen bir niş senaryo var, ancak başka birinin yararlı bulabilmesi durumunda paylaşmak istedim.

Bir raylar projesinde, bir Rails motoru kullanan bir mücevher ile biraz tekrar kullanıyoruz bootstrap-sass. Glifik yazı tipi yol çözünürlüğü dışında ana projede her şey yolundaydı.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Biz bulundu $bootstrap-sass-asset-helperoldu falsebiz bunun doğru olması beklenen zaman yol farklıydı yüzden, çözünürlük sırasında.

$bootstrap-sass-asset-helperYaparak motor geminde başlatılmasına neden olduk :

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

örneğin bu, çözüm yolunu şu şekilde çözdü:

/assets/bootstrap/glyphicons-halflings-regular.woff

Yine, bu, herhangi bir normal ray projesinde gerekli olmamalı bootstrap-sass, sadece birçok görüşü tekrar kullanıyoruz ve bu bizim için işe yaradı. Umarım bu başka birine yardımcı olabilir.

Oluşturulmayan yazı tipleriyle ilgili resmi belgeler aşağıda belirtilmiştir.

Simge yazı tipi konumunu değiştirme Bootstrap, simge yazı tipi dosyalarının, derlenen CSS dosyalarına göre ../fonts/ dizininde bulunacağını varsayar. Bu yazı tipi dosyalarını taşımak veya yeniden adlandırmak, CSS'nin üç yoldan biriyle güncellenmesi anlamına gelir: Daha az dosyadaki @ icon-font-path ve / veya @ icon-font-name değişkenlerini değiştirin. Daha az derleyici tarafından sağlanan göreli URL'leri kullanın. Derlenen CSS'deki url () yollarını değiştirin. Özel geliştirme kurulumunuza en uygun seçeneği kullanın.

Bunun dışında, fontlar klasörünü kök dizine kopyalamayı kaçırmış olabilirsiniz.

Bu sorun vardı ve değişkenler.less dosyası neden oldu. Simge-yazı tipi-yol değerini ayarlamak için geçersiz kılmak sorunu çözdü.

Yapılandırılmış dosya şöyle görünür:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Kendi kökleri.less dosyamı İçeriğin kök dizinine eklemek ve styles.less dosyasında buna başvurmak 404 hatasını çözdü.

Değişkenler.less şunları içerir:

@icon-font-path:          "fonts/";

NuGet'ten Bootstrap aldım. Sitemi yayınladığımda glifler çalışmadı.

Benim durumumda, her yazı tipi dosyası için Oluşturma Eylemini 'İçerik' olarak ayarlayıp 'Her Zaman Kopyala' olarak ayarlayarak çalıştım.

glifikon-ok aşağı için bir kutu genişliği kodu \ e094 vardı, aslında ben böyle css sınıfında glifphi ekleme sorunu çözüldü :

<i class="glyphicon  glyphicon-arrow-down"></i>

eğer birine yardım edebilirse ...

Yazı tipi ailesini fazla belirtmediğinizden emin olun, örneğin

*{font-family: Verdana;}

halflings yazı tipini i öğelerinden kaldıracaktır.

Tarayıcının yazı tipi dosyalarını bulamamasıyla aynı sorunu yaşıyordum ve sorunum, .htaccess dosyamdaki index.phpişleme için gönderilmemesi gereken dosyaları beyaz listeye ekleyen hariç tutmalar nedeniyle oldu . Yazı tipi dosyası yüklenemediğinden, karakterler BLOB ile değiştirildi.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Gördüğünüz gibi, resimler, rss ve xml gibi dosyalar yeniden yazma işleminden hariç tutulur, ancak yazı tipi dosyaları .woffve .woff2dosyalardır, bu nedenle bunların da beyaz listeye eklenmesi gerekir.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Beyaz listeye woffve eklemek woff2, yazı tipi dosyalarının yüklenmesine izin verir ve glifikonlar düzgün şekilde görüntülenmelidir.

Bu siparişle ayarlamanız gerekir:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

Benim için işe yarayan, şu yerlerin yerine geçiyordu:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

için

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Simgeyi bootstrap 3'e böyle eklersiniz

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

http://glyphicons.bootstrapcheatsheets.com/

Umarım yardımcı olur.

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

Ben isim alanı ve çalışmıyor glificons ile bootstrap kullanıyorum ama kod glificons iyi satır yukarıdaki satır ekledikten sonra.

Yazı tipini Ctrl + c, Ctrl + v kullanarak bootstrap.css'den yeniden adlandırdım ve çalıştı.