[Bài đọc] Glyphicons trong Bootstrap

Chương này sẽ thảo luận về Glyphicons, cách sử dụng và một số ví dụ. Bootstrap có 200 glyphs trong định dạng phông chữ. Bây giờ chúng ta hãy hiểu Glyphicons là gì.

Glyphicons là gì?

Glyphicons là các biểu tượng phông chữ mà bạn có thể sử dụng trong các dự án web của bạn. Glyphicons Halflings không phải là miễn phí và yêu cầu cấp phép, tuy nhiên người tạo của họ đã làm cho chúng có sẵn cho các dự án Bootstrap miễn phí.

Có thể tìm thấy Glyphicons ở đâu ?

Bây giờ chúng ta đã tải về phiên bản Bootstrap 3.x và hiểu cấu trúc thư mục của nó trong chương Environment Setup, glyphicons có thể được tìm thấy trong thư mục fonts. Điều này chứa các tập tin sau đây:

• Glyphicons-halflings-regular.eot
• Glyphicons-halflings-regular.svg
• Glyphicons-halflings-regular.ttf
• Glyphicons-halflings-regular.woff

Các quy tắc CSS kết hợp có trong các tệp bootstrap.css và bootstrap-min.css trong thư mục css của thư mục dist. Bạn có thể xem glyphicons có sẵn tại liên kết này GLYPHICONS .

Cách sử dụng

Toàn bộ các biểu tượng yêu cầu một class cơ sở và class cụ thể cho các biểu tượng đó. Để sử dụng, hãy thêm đoạn code sau đây vào nơi bạn sử dụng. Để hiển thị được tốt, bạn hãy nhớ luôn thêm một khoảng trắng vào giữa biểu tượng và text..

HTML :

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

Ví dụ sau chứng minh điều này:

HTML:

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>