Glyphicons renderowania jako puste pole

Question

używam doskonałą Twitter startowej biblioteki z Glyphicons jednak wszystkie ikony są renderowania jako puste pola, tak jak poniżej:

mam dodane do czcionek Glyphicons mój korzeń internetowych i zmienił plik bootstrap.css aby zwracali uwagę na ich właściwych miejscach, które zostały zweryfikowane, ponieważ mają 200 OK wniosków w dev narzędzi Chrome:

Jest to znacznik, którego używam:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a> 

Jakieś pomysły, dlaczego czcionka może być renderowana jako puste pola? Poprzednie odpowiedzi na StackOverflow wszystkie wskazują na nieprawidłowe ścieżki do czcionek, co nie ma miejsca tutaj, ponieważ ścieżki są poprawne.

Answer 1

Niezupełnie rozwiązanie, ale skończyło się tylko przy użyciu Bootstrap CDN: http://www.bootstrapcdn.com/

Answer 2

dla mnie to ten narzut, który działa ... tylko definicje klasy ikony, które są różne:

<a href="http://www.mysite.com/download" class="btn btn-primary"> 
    <span class="glyphicons star"></span> 
    Download to Computer 
</a> 

Answer 3

zrobiłem kilka porównań i okazuje się, że plik bootstrap.css miałem zawartą w tym:

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular') 

podczas gdy powinno być:

url('../fonts/glyphiconshalflings-regular.svg#glyphiconshalflingsregular') 

Uwaga Dodałem podkreślenie, które obecnie jest zgodne z identyfikatorem zadeklarowanym wewnątrz <font id="..."> w pliku .svg.

Answer 4

Acording do zespołu Glyphicons, jest to błąd w WebKit:

WebKit CSS content Unicode bug?

Ale nie undertend dlaczego starsza wersja Chrome czynią to. Opublikowalem tutaj wersje, ale jeden moderator usunął moją odpowiedź.

Answer 5

Poniżej css strofy definiuje rodzinę czcionek dla Glyphicons Halflingom // wewnątrz bootstrap.css

@font-face { 
    font-family: "Glyphicons Halflings"; 
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), 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"); 
} 

Jeśli używasz CDN .. wymagana EOT i plików Woof są dostępne we względnej ścieżce adresu URL CDN .. tj https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.eot https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff2 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.ttf https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

Więc jeśli chcesz używać Glifphonów z plikiem bootstrap.css w twojej lokalnej maszynie .. pobierz wszystkie pliki z powyższego linku i umieść go w tej samej ścieżce względnej ... tj .. ../fonts/

spróbuj teraz ...

Uwaga: Nie wiem o licencjonowaniu tych plików (przeczytaj trochę dokumentów do użytku biznesowego). może być jakiś darmowy link dostarczony przez bootstrap do pobrania tego pliku ...

Answer 6

Dla mnie, zauważyłem, że w wersji Sass, tym _glyphicons.scss sekcję:

@at-root { 
    // Import the fonts 
    @font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot')); 
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot #iefix')) format('embedded-opentype'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg'); 
    } 
} 

musiał zostać zastąpiony jak kiedyś:

// Import the fonts 
@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot')); 
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'), 
     url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg'); 
} 

Answer 7

byłem mający takie same problem i udało mi się go rozwiązać!

• W IIS, ustawić typów MIME dla WOFF i woff2 następująco:

  .woff application/x-font-woff 
  .woff2 application/font-woff2 
  

• W CSS dla mojej strony, stworzyłem załadowaną czcionkę z bootstrap Glyphicon pobrania dla WOFF i woff2:

  @font-face { 
      font-family: 'Glyphs'; 
      src: url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
       url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'); 
  } 
  

• W CSS, stworzyłem klasę dla glyphicons i przeznaczone do korzystania z wyżej czcionki że zatytułowanych "Glify":

  .glyphicon { 
      font-family: 'Glyphs', sans-serif; 
  } 
  

• Gdziekolwiek chciałem wyświetlić glyphicon, że określona przez klasę glyphicon wtedy zazwyczaj bootstrap klasy glyphicon:

  <span class='glyphicon glyphicon-home'></span> 
  

Answer 8

skopiować folder "czcionki" z pakietu bootstrap na serwerze . I gotowe.

Answer 9

Umieść folder czcionek w katalogu css
Powinno pójść jak

css/fonts/**.svg 
css/fonts/**.woff 

Answer 10

dla tych, którzy próbowali wszystkiego przed i nadal nie działał Zmieniłem

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

do

.glyphicon:before { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale 
} 

w pliku bootstrap.css

Answer 11

Może się to również zdarzyć, jeśli nie podano obu klas (tj. tylko "glyphicon-star" zamiast "glyphicon glyphicon-star")

Dobre: ​​

<i class="glyphicon glyphicon-star"> 

Bad

<i class="glyphicon"> 

Answer 12

miałem ten sam problem. W moim przypadku był typem MIME, lecz zanim nie wiem, bo mój IIS nie dodam przez ui jak pokazują:

My iis ui

Nie sądziłem, że tak było typy MIME próbowali inni rozwiązują . Kilka godzin później, aby zapoznać się z typami mime.

Używane wiele rozwiązań, takich jak edycja strony internetowej.config więcej niż 30 razy:

<configuration> 
<system.webServer> 
    <staticContent> 
     <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" /> 
     <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" /> 
     <mimeMap fileExtension="svg" mimeType="image/svg+xml" /> 
     <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" /> 
     <mimeMap fileExtension="woff" mimeType="application/font-woff" /> 
     <mimeMap fileExtension="woff2" mimeType="application/font-woff2" /> 
    </staticContent> 
</system.webServer> 

kodu zmieniło, testowane boudles, dodając cechy na IIS, zmienił ścieżkę, po wszystkich zamiarów DAT cholernie kwadrat zawsze, nic nie działa.

Tak więc, na forum o dodawaniu typów mimów do iis z konsolą próbowałem dodać takie, jak powiedzieli.

Otwarty cmd jako administratori texted:

C:\Windows\System32\inetsrv>appcmd.exe set config /section:staticContent 
/+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" 

Gdzie:

"C:\Windows\System32\inetsrv" to folder główny z ISS.

I:

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" To wiersz poleceń w konfiguracji, że mim w appcmd, jak wiadomo, IIS.

Result:

I et voilà! ta praca.

Mam nadzieję, że to może pomóc komuś. Może być dla mnie przydatny.