cách bao gồm glyphicons trong bootstrap 3

Tôi đã không sử dụng bất kỳ khung công tác khởi động nào trước đây. Tôi muốn bao gồm một số các glyphicons trong bootstrap 3 trên trang của tôi. Từ những gì tôi hiểu họ nên được bao gồm trong một tập tin bootstrap.css mà tôi đã thêm vào trang của tôi. Khi tôi đã nhìn vào tập tin bootstrap.css tuy nhiên tôi không thấy bất kỳ tham chiếu đến chúng? Mặc dù một tập tin lớn của nó tôi có thể đã bỏ lỡ một cái gì đó.cách bao gồm glyphicons trong bootstrap 3

tôi đã nhận thấy rằng khi tôi mở thư mục dist tải về từ bootstrap 3 có một thư mục riêng biệt fonts có chứa tập tin có tên:

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

Nó Có vẻ như đây là nơi mà glyphicons là tuy nhiên tôi không biết cách đính kèm chúng vào trang web của tôi? Làm thế nào để đính kèm các glyphicons vào trang của tôi?

Nhờ sự giúp đỡ trước

Đoạn code dưới đây cho thấy các tập tin bootstrap.css kèm theo:

<!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>

và đây là một phần của mã html thấy nơi glyphicons nên là:

 <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>

Nguồn

2013-10-26 moonshineOutlaw

Xem nơi lưu các tệp phông chữ (http://getbootstrap.com/getting-started/#whats-included-precompiled) và đọc về thứ tự nhập (https://github.com/twbs/bootstrap- sass # fonts) đã giúp tôi. – Ryan

Tôi nghĩ rằng vấn đề cụ thể của bạn không phải là cách sử dụng Glyphicons nhưng hiểu cách các tệp Bootstrap hoạt động cùng nhau.

Bootstrap yêu cầu cấu trúc tệp cụ thể để hoạt động. Tôi thấy từ mã của bạn, bạn có điều này:

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

Bootstrap.css của bạn đang được nạp từ cùng một vị trí như trang của bạn, điều này sẽ tạo ra một vấn đề nếu bạn không điều chỉnh cấu trúc tập tin của bạn.

Nhưng trước tiên, hãy để tôi khuyên bạn nên thiết lập cấu trúc thư mục của bạn như vậy:

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

Nếu bạn nhận thấy, đây cũng là cách cấu trúc Bootstrap file của nó trong ZIP tải về của nó.

Sau đó bạn bao gồm tập tin Bootstrap của bạn như vậy:

<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">

Tùy thuộc vào cấu trúc máy chủ của bạn hoặc những gì bạn đang đi cho.

Thứ nhất và thứ hai liên quan đến thư mục hiện tại của tệp của bạn. Điều thứ hai chỉ rõ ràng hơn bằng cách nói "ở đây" (./) trước rồi đến thư mục css (/ css).

Thứ ba là tốt nếu bạn đang chạy máy chủ web và bạn chỉ có thể sử dụng ký hiệu gốc với ký tự gốc là "/" sẽ luôn bắt đầu ở thư mục gốc.

Vì vậy, tại sao thực hiện điều này?

Bootstrap.css có dòng cụ này cho Glyphfonts:

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

Những gì bạn có thể thấy là rằng Glyphfonts được nạp bằng cách lên một thư mục ../ và sau đó tìm kiếm một thư mục có tên /fonts và THEN tải tập tin phông chữ.

Địa chỉ URL có liên quan đến vị trí của tệp CSS. Vì vậy, nếu tệp CSS của bạn ở cùng một vị trí như sau:

/fonts 
Bootstrap.css 
index.html

Tệp CSS sẽ sâu hơn một mức so với tìm kiếm thư mục /fonts.

Vì vậy, giả sử vị trí thực tế của những tập tin này là:

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

Các tập tin CSS sẽ về mặt kỹ thuật được tìm kiếm một thư mục tại địa chỉ:

C:\fonts

nhưng thư mục của bạn thực sự là trong:

C:\www\fonts

Vì vậy, hãy xem điều đó có hữu ích không. Bạn không phải làm bất cứ điều gì 'đặc biệt' để tải Bootstrap Glyphicons, ngoại trừ đảm bảo cấu trúc thư mục của bạn được thiết lập một cách thích hợp.

Khi bạn nhận được rằng cố định, HTML của bạn chỉ đơn giản nên là:

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

Lưu ý, bạn cần cả lớp. Lớp đầu tiên glyphicon thiết lập các kiểu cơ bản trong khi glyphicon-comment đặt hình ảnh cụ thể.

Nguồn

2013-10-26 16:41:38 jmbertucci

Tôi chỉ cần thêm một điều nữa. Nếu bạn có cấu trúc tệp thích hợp và bootstrap vẫn không thể định vị các tệp phông chữ, VÀ bạn đang sử dụng một khung công tác như Spring MVC yêu cầu ánh xạ yêu cầu cho các tệp tĩnh, hãy chắc chắn cập nhật các ánh xạ đó. Hy vọng rằng có thể cứu người khác 20 phút ... – Mac

cách bao gồm glyphicons trong bootstrap 3

Trả lời

Các vấn đề liên quan