jak włączyć gliphicons w bootstrap 3 [duplikat]

Question

jak włączyć gliphicons w bootstrap 3 [duplikat]

To pytanie ma już odpowiedź tutaj:

Jak używać gliphicons w bootstrap 3.0 9 odpowiedzi

Nie używałem wcześniej żadnej z frameworków bootstrap. Chcę dołączyć kilka gliphiconów do bootstrap 3 na mojej stronie. Z tego, co rozumiem, powinny być zawarte w bootstrap.plik css, który dodałem do swojej strony. Kiedy zajrzałem do bootstrap.plik css jednak nie widzę odniesienia do nich ? Chociaż to duży plik, może coś przeoczyłem.

Zauważyłem, że po otwarciu folderu dist pobranego z bootstrap 3 znajduje się osobny folder fonts zawierający pliki o nazwie:

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

Wygląda na to, że to tutaj są glifikony, ale nie wiem, jak dołączyć je do mojej strony? Jak mogę dołączyć gliphicons do mojej strony ?

Z góry dzięki za pomoc

Kod poniżej znajduje się załączony bootstrap.plik css:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap example</title>
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet" media="screen">
 </head>

A oto część kodu html pokazująca, gdzie powinny być glifikony:

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
           Home</a></li>    
          <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
           Destinations</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span    
            class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>

44

html css folder twitter-bootstrap-3

Author: moonshineOutlaw, 2013-10-26

Source

1 answers

score 91 · Accepted Answer

Myślę, że Twoim problemem nie jest to, jak używać Gliphicons, ale zrozumienie, jak pliki Bootstrap współpracują ze sobą.

Bootstrap wymaga określonej struktury plików do działania. Widze ze z twojego kodu masz to:

<link href="bootstrap.css" rel="stylesheet" media="screen">

Twój Bootstrap.css jest ładowany z tej samej lokalizacji, co strona, spowodowałoby to problem, gdybyś nie dostosował struktury plików.

Ale najpierw, pozwól mi polecić Ci skonfigurować strukturę folderów jak więc:

/css      <-- Bootstrap.css here
/fonts    <-- Bootstrap fonts here
/img
/js       <-- Bootstrap JavaScript here
index.html

Jeśli zauważysz, w ten sposób Bootstrap strukturyzuje swoje pliki w pobieranym ZIP.

Następnie dołączasz swój plik Bootstrap w następujący sposób:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">

W zależności od struktury serwera lub do czego zmierzasz.

Pierwszy i drugi są względne do bieżącego katalogu Twojego pliku. Drugi jest po prostu bardziej wyraźny, mówiąc "tutaj" (./ ) najpierw folder css (/css).

Trzeci jest dobry, jeśli prowadzisz serwer WWW i możesz po prostu użyj notacji względnej do katalogu głównego, ponieważ główny " / " będzie zawsze zaczynał się od katalogu głównego.

Więc dlaczego to robisz?

Bootstrap.css ma tę konkretną linię dla Gliffontów:

@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');
}

Widzisz, że Glifonty ładowane są przez przejście do jednego katalogu ../, a następnie szukanie folderu o nazwie /fonts i , a następnie ładowanie pliku czcionki.

Adres URL jest zależny od lokalizacji pliku CSS. Tak więc, jeśli plik CSS znajduje się w tym samym miejscu tak:

/fonts
Bootstrap.css
index.html

Plik CSS jest o jeden poziom głębszy niż szukanie folderu /fonts.

Powiedzmy więc, że rzeczywista lokalizacja tych plików to:

C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html

Plik CSS technicznie szukałby folderu pod adresem:

C:\fonts

Ale twój folder jest w:

C:\www\fonts

Zobacz, czy to pomoże. Nie musisz robić nic "specjalnego", aby załadować Bootstrap Gliphicons, poza upewnieniem się, że struktura folderów jest odpowiednio skonfigurowana.

Kiedy jeśli to naprawisz, Twój HTML powinien być po prostu:

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

Uwaga, potrzebujesz obu klas . Pierwsza klasa glyphicon ustawia Podstawowe style, podczas gdy glyphicon-comment ustawia konkretny obraz.