Tôi có thể sử dụng các biểu tượng bootstrap mà không cần bootstrap không?

Question

Phông chữ tuyệt vời hỗ trợ IE7. Nếu bạn cần nó, bạn có lời chia buồn của tôi

Nội dung chính Show

Làm cách nào để thêm biểu tượng trong HTML mà không cần Bootstrap?
Làm cách nào để sử dụng các biểu tượng Bootstrap cục bộ?
Làm cách nào để sử dụng các biểu tượng Bootstrap trong HTML CSS?

Nhận Font Awesome hoạt động bình thường trong trình duyệt hiện đại
Sao chép phông chữ tuyệt vời-ie7. tối thiểu. css vào dự án của bạn
Trong html của bạn, hãy tham chiếu vị trí tới font-awesome-ie7 của bạn. tối thiểu. css
Hãy khiếu nại với bất kỳ ai đã quyết định dự án của bạn cần hỗ trợ IE7

Bootstrap hiện bao gồm hơn 1.300 biểu tượng chất lượng cao, có sẵn ở định dạng SVG, SVG sprite hoặc phông chữ web. Bạn có thể sử dụng chúng có hoặc không có Bootstrap trong bất kỳ dự án nào

Sử dụng các biểu tượng Bootstrap trong mã của bạn

Để sử dụng các biểu tượng Bootstrap trong mã của bạn, bạn sẽ cần một thẻ với lớp biểu tượng riêng lẻ .bi-* được áp dụng trên đó. Cú pháp chung để sử dụng các biểu tượng Bootstrap là

Thí dụ

Hãy xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstraptitle>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
head>
<body>
    <h1><i class="bi-globe">i> Globeh1>
    <h1><i class="bi-bank2">i> Bank2h1>
    <h1><i class="bi-binoculars-fill">i> Binoculars-fillh1>
    <h1><i class="bi-calendar-fill">i> Calendar-fillh1>
    
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>

Trong đoạn mã trên, chúng tôi đã sử dụng lớp .bi-* để sử dụng các biểu tượng trong bootstrap

Kiểm tra đầu ra của ví dụ mã trên

Tương tự, bạn có thể đặt các biểu tượng Font Awesome bên trong điều hướng, biểu mẫu, bảng, đoạn văn và các thành phần khác giống như cách bạn thực hiện với các biểu tượng Bootstrap

Làm cách nào để thêm biểu tượng trong HTML mà không cần Bootstrap?

Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là với thư viện biểu tượng, chẳng hạn như Phông chữ tuyệt vời . Thêm tên của lớp biểu tượng được chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như

Làm cách nào để sử dụng các biểu tượng Bootstrap cục bộ?

Đưa biểu định kiểu phông chữ Biểu tượng Bootstrap vào . Hoặc, sử dụng @import để bao gồm biểu định kiểu theo cách đó. /* Lựa chọn 2. Nhập qua CSS */ @import url("https. //cdn. jsdelivr. net/npm/bootstrap-icons@1. 3. 0/phông chữ/bootstrap-icon. css"); Thêm đoạn mã HTML để bao gồm các Biểu tượng Bootstrap nếu muốn.

Làm cách nào để sử dụng các biểu tượng Bootstrap trong HTML CSS?

Có thể thêm các biểu tượng Bootstrap vào HTML và CSS bằng cách sử dụng liên kết CDN của các biểu tượng mặc định . Hỗ trợ các biểu tượng mặc định được cung cấp bởi chính Bootstrap và bạn phải thêm liên kết CDN của các biểu tượng bootstrap vào tài liệu HTML của mình.

programming bootstrap

Tôi có thể sử dụng các biểu tượng bootstrap mà không cần bootstrap không?

Thí dụ

Làm cách nào để thêm biểu tượng trong HTML mà không cần Bootstrap?

Làm cách nào để sử dụng các biểu tượng Bootstrap cục bộ?

Làm cách nào để sử dụng các biểu tượng Bootstrap trong HTML CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội