ví dụ và hướng dẫn. – biểu tượng trong bootstrap 4

Cách sử dụng biểu tượng Bootstrap là một hướng dẫn nhanh mô tả cách thích hợp để sử dụng các biểu tượng Font Awesome trong khuôn khổ Bootstrap.

Bạn đang xem : biểu tượng trong bootstrap 4

Biểu tượng

Biểu tượng Bootstrap

Lưu ý: Tài liệu này dành cho phiên bản cũ hơn của Bootstrap (v.4). Một
phiên bản mới hơn có sẵn cho Bootstrap 5. Chúng tôi khuyên bạn nên chuyển sang phiên bản mới nhất của sản phẩm – Material Design cho
Bootstrap 5.

Đi tới tài liệu v.5

Cách sử dụng biểu tượng Bootstrap là một hướng dẫn nhanh mô tả cách sử dụng Font Awesome đúng cách
các biểu tượng trong khung Bootstrap.

MDB sử dụng một bộ biểu tượng mạnh mẽ có tên là Font Awesome.

Một phông chữ, 1480 biểu tượng

Trong một phông chữ
bộ sưu tập, Font Awesome là một ngôn ngữ hình ảnh của các hành động liên quan đến web.

Không yêu cầu JavaScript

Ít hơn
lo ngại về khả năng tương thích vì Font Awesome không yêu cầu JavaScript.

Khả năng mở rộng vô hạn

Có thể mở rộng
đồ họa vector có nghĩa là mọi biểu tượng đều trông tuyệt vời ở bất kỳ kích thước nào.

Miễn phí, như trong Speech

Font Awesome

hoàn toàn miễn phí để sử dụng thương mại.

Kiểm soát CSS

Dễ dàng tạo kiểu
biểu tượng
màu sắc, kích thước, bóng và bất kỳ thứ gì có thể có với CSS.

Hoàn hảo trên Màn hình Retina

Phông chữ Tuyệt vời
biểu tượng là các vectơ, có nghĩa là chúng tuyệt đẹp trên màn hình có độ phân giải cao.

Phông chữ tuyệt vời về khả năng truy cập

yêu thích trình đọc màn hình

và giúp tạo
biểu tượng của bạn có thể truy cập được
trên web.

Cách sử dụng cơ bản

Ví dụ: biểu tượng cơ bản fa-camera-retro

Bạn có thể đặt các biểu tượng Font Awesome ở bất cứ đâu bằng cách sử dụng Tiền tố CSS fa và của biểu tượng
Tên. Font Awesome được thiết kế để sử dụng với các phần tử nội dòng (chúng tôi thích thẻ & lt; i & gt; cho
ngắn gọn, nhưng sử dụng
a & lt; span & gt; đúng hơn về mặt ngữ nghĩa).

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

                  & lt; i class = "fas fa-camera-retro" & gt; & lt; / i & gt; fa-camera-retro

                
        
    
  • Ví dụ: biểu tượng cơ bản Nếu bạn thay đổi kích thước phông chữ của vùng chứa biểu tượng,
    biểu tượng trở nên lớn hơn. Điều tương tự cũng xảy ra với màu sắc, đổ bóng và bất kỳ thứ gì khác được kế thừa bằng cách sử dụng
    CSS.

Các biểu tượng lớn hơn

Để tăng kích thước biểu tượng so với vùng chứa của chúng, hãy sử dụng fa-xs , fa-sm , fa-lg
(Tăng 33%), fa-2x ,
fa-3x , fa-4x , fa-5x , fa-6x , fa-7x , fa-8x ,
Các lớp fa-9x , fa-10x .

Hiển thị mã


Chỉnh sửa trong hộp cát


            

                  & lt; i class = "fas fa-camera fa-xs" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-sm" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-lg" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-2x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-3x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-4x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-5x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-6x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-7x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-8x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-9x" & gt; & lt; / i & gt;
                  & lt; i class = "fas fa-camera fa-10x" & gt; & lt; / i & gt;

                
        
    
  • Nếu các biểu tượng của bạn bị cắt nhỏ ở trên cùng và
    dưới cùng, hãy đảm bảo bạn có đủ chiều cao dòng.

Lợi nhuận

ml-3

mr-3

mx-4

my-4

m-5

Bạn có thể thêm khoảng cách cho các biểu tượng của mình từ trên cùng, dưới cùng, bên phải, bên trái hoặc tất cả các bên. Xem tại đây để xem tất cả các khả năng.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

                  & lt; p & gt; & lt; i class = "fas fa-gift fa-2x pink-text ml-3" aria-hidden = "true" & gt; & lt; / i & gt; ml-3 & lt; / p & gt;
                  & lt; p & gt; & lt; i class = "fas fa-gift fa-2x pink-text mr-3" aria-hidden = "true" & gt; & lt; / i & gt; mr-3 & lt; / p & gt;
                  & lt; p & gt; & lt; i class = "fas fa-gift fa-2x pink-text mx-4" aria-hidden = "true" & gt; & lt; / i & gt; mx-4 & lt; / p & gt;
                  & lt; p & gt; & lt; i class = "fas fa-gift fa-2x pink-text my-4" aria-hidden = "true" & gt; & lt; / i & gt; my-4 & lt; / p & gt;
                  & lt; p & gt; & lt; i class = "fas fa-gift fa-2x pink-text m-5" aria-hidden = "true" & gt; & lt; / i & gt; m-5 & lt; / p & gt;

                
        
    

Các biểu tượng chiều rộng cố định

Với các lớp này, bạn có thể có các biểu tượng với kiểu hỗ trợ chiều rộng cố định.

facebook

twitter

instagram

linkedin

pinterest

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; div style = "font-size: 2rem;" & gt;
              & lt; div & gt; & lt; i class = "fab fa-facebook-f fa-fw blue-text" & gt; & lt; / i & gt; facebook & lt; / div & gt;
              & lt; div & gt; & lt; i class = "fab fa-twitter fa-fw blue-text" & gt; & lt; / i & gt; twitter & lt; / div & gt;
              & lt; div & gt; & lt; i class = "fab fa-instagram fa-fw pink-text" & gt; & lt; / i & gt; instagram & lt; / div & gt;
              & lt; div & gt; & lt; i class = "fab fa-linkedin fa-fw blue-text" & gt; & lt; / i & gt; linkedin & lt; / div & gt;
              & lt; div & gt; & lt; i class = "fab fa-pinterest fa-fw red-text" & gt; & lt; / i & gt; pinterest & lt; / div & gt;
            & lt; / div & gt;

          
        
    

Các biểu tượng trong danh sách

Bạn có thể sử dụng biểu tượng với chiều rộng đầy đủ trong danh sách.

  • Các biểu tượng danh sách có thể

  • đã quen với

  • thay dấu đầu dòng

  • trong danh sách

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; ul class = "fa-ul" & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-check-square" & gt; & lt; / i & gt; & lt; / span & gt; Biểu tượng danh sách có thể & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-check-square" & gt; & lt; / i & gt; & lt; / span & gt; được sử dụng để & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-spinner fa-xung" & gt; & lt; / i & gt; & lt; / span & gt; thay đạn & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "far fa-square" & gt; & lt; / i & gt; & lt; / span & gt; trong danh sách & lt; / li & gt;
            & lt; / ul & gt;


          
        
    
  1. Các biểu tượng danh sách có thể

  2. đã quen với

  3. thay dấu đầu dòng

  4. trong danh sách

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; ol class = "fa-ul" & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-check-square" & gt; & lt; / i & gt; & lt; / span & gt; Biểu tượng danh sách có thể & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-check-square" & gt; & lt; / i & gt; & lt; / span & gt; được sử dụng để & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "fas fa-spinner fa-xung" & gt; & lt; / i & gt; & lt; / span & gt; thay đạn & lt; / li & gt;
              & lt; li & gt; & lt; span class = "fa-li" & gt; & lt; i class = "far fa-square" & gt; & lt; / i & gt; & lt; / span & gt; trong danh sách & lt; / li & gt;
            & lt; / ol & gt;

          
        
    

Các biểu tượng xoay

Với các lớp này, bạn có thể xoay các biểu tượng của mình.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; div class = "fa-3x" & gt;
              & lt; i class = "fas fa-bath" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-bath fa-Rot-90" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-bath fa-Rot-180" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-bath fa-rot-270" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-bath fa-flip-ngang" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-bath fa-flip-vertical" & gt; & lt; / i & gt;
            & lt; / div & gt;

          
        
    

Biểu tượng hoạt hình

Với các lớp này, bạn có thể tạo hoạt ảnh cho các biểu tượng của mình.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; i class = "fas fa-spinner fa-spin" & gt; & lt; / i & gt;
            & lt; i class = "fas fa-circle-notch fa-spin" & gt; & lt; / i & gt;
            & lt; i class = "fas fa-sync fa-spin" & gt; & lt; / i & gt;
            & lt; i class = "fas fa-cog fa-spin" & gt; & lt; / i & gt;
            & lt; i class = "fas fa-spinner fa-xung" & gt; & lt; / i & gt;
            & lt; i class = "fas fa-star-giáng sinh fa-spin" & gt; & lt; / i & gt;
            & lt; i class = "xa fa-smile-beam fa-spin" & gt; & lt; / i & gt;

          
        
    

Biểu tượng xếp chồng

Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa-stack trên phần tử HTML chính của 2 biểu tượng bạn muốn
cây rơm. sau đó
thêm lớp fa-stack-1x cho biểu tượng có kích thước thường xuyên và thêm lớp fa-stack-2x cho
biểu tượng lớn hơn.
fa-inverse có thể được thêm vào biểu tượng với fa-stack-1x để giúp xem xét
hiệu ứng. Bạn
co thể, thậm chi
ném các lớp biểu tượng lớn hơn lên cha mẹ để kiểm soát thêm việc định cỡ.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; i class = "xa fa-circle fa-2x" & gt; & lt; / i & gt;
            & lt; span class = "fa-stack" & gt;
              & lt; i class = "xa fa-circle fa-stack-2x" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-đầu lâu xương chéo fa-stack-1x" & gt; & lt; / i & gt;
            & lt; / span & gt;

            & lt; span class = "fa-stack fa-2x" & gt;
              & lt; i class = "fas fa-square fa-stack-2x fa-inverse" & gt; & lt; / i & gt;
              & lt; i class = "fab fa-twitter fa-stack-1x" & gt; & lt; / i & gt;
            & lt; / span & gt;

            & lt; span class = "fa-stack fa-2x" & gt;
              & lt; i class = "fas fa-square fa-stack-2x" & gt; & lt; / i & gt;
              & lt; i class = "fab fa-twitter fa-stack-1x fa-inverse" & gt; & lt; / i & gt;
            & lt; / span & gt;

            & lt; span class = "fa-stack fa-2x" & gt;
              & lt; i class = "fas fa-circle fa-stack-2x" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-flag fa-stack-1x fa-inverse" & gt; & lt; / i & gt;
            & lt; / span & gt;
            & lt; span class = "fa-stack fa-2x" & gt;
              & lt; i class = "fas fa-square fa-stack-2x" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-terminal fa-stack-1x fa-inverse" & gt; & lt; / i & gt;
            & lt; / span & gt;
            & lt; span class = "fa-stack fa-4x" & gt;
              & lt; i class = "fas fa-square fa-stack-2x" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-terminal fa-stack-1x fa-inverse" & gt; & lt; / i & gt;
            & lt; / span & gt;
            & lt; span class = "fa-stack fa-2x" & gt;
              & lt; i class = "fas fa-camera fa-stack-1x" & gt; & lt; / i & gt;
              & lt; i class = "fas fa-ban fa-stack-2x" style = "color: red" & gt; & lt; / i & gt;
            & lt; / span & gt;

          
        
    

Các biểu tượng có viền + kéo

Đôi khi, bạn có thể muốn bọc văn bản xung quanh một biểu tượng hoặc tạo sự phân biệt trực quan với đường viền. Đây là
như thế nào với kiểu hỗ trợ mà chúng tôi đã đưa vào.

Sử dụng fa-border fa-pull-right hoặc fa-pull-left để lấy dấu ngoặc kép dễ dàng hoặc
các biểu tượng bài viết.

Gatsby tin vào ánh sáng xanh, tương lai vui vẻ năm đó dần lùi xa trước mắt chúng ta.
Khi đó nó đã lẩn tránh chúng tôi, nhưng điều đó không có vấn đề gì – ngày mai chúng tôi sẽ chạy nhanh hơn, vươn tay xa hơn …
Và vào một buổi sáng đẹp trời – Vì vậy, chúng tôi đánh nhau, những con thuyền ngược dòng hiện tại, không ngừng lùi về quá khứ.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; i class = "fas fa-quote-left fa-2x fa-pull-left" & gt; & lt; / i & gt;
            Gatsby tin vào ánh sáng xanh, tương lai vui vẻ năm đó dần lùi xa trước mắt chúng ta.
            Khi đó nó đã lẩn tránh chúng tôi, nhưng điều đó không có vấn đề gì - ngày mai chúng tôi sẽ chạy nhanh hơn, vươn tay xa hơn ...
            Và vào một buổi sáng đẹp trời - Vì vậy, chúng tôi đánh nhau, những con thuyền ngược dòng hiện tại, không ngừng lùi về quá khứ.

          
        
    

Gatsby tin vào ánh sáng xanh, tương lai vui vẻ năm đó dần lùi xa trước mắt chúng ta.
Khi đó nó đã lẩn tránh chúng tôi, nhưng điều đó không có vấn đề gì – ngày mai chúng tôi sẽ chạy nhanh hơn, vươn tay xa hơn …
Và vào một buổi sáng đẹp trời – Vì vậy, chúng tôi đánh nhau, những con thuyền ngược dòng hiện tại, không ngừng lùi về quá khứ.

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; i class = "fas fa-arrow-right fa-2x fa-pull-right fa-border" & gt; & lt; / i & gt;
            Gatsby tin vào ánh sáng xanh, tương lai vui vẻ năm đó dần lùi xa trước mắt chúng ta.
            Khi đó nó đã lẩn tránh chúng tôi, nhưng điều đó không có vấn đề gì - ngày mai chúng tôi sẽ chạy nhanh hơn, vươn tay xa hơn ...
            Và vào một buổi sáng đẹp trời - Vì vậy, chúng tôi đánh nhau, những con thuyền ngược dòng hiện tại, không ngừng lùi về quá khứ.

          
        
    

nút

Bạn nên cải thiện sự xuất hiện của các nút bằng biểu tượng. Xem tại đây để xem các tùy chọn nút khác.


Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; a class = "btn-float btn-lg Purple-gradient" & gt; & lt; i class = "fas fa-bolt" & gt; & lt; / i & gt; & lt; / a & gt;
            & lt; button type = "button" class = "btn btn-info btn-round btn-lg" & gt; Button & lt; i class = "fas fa-heart ml-2" aria-hidden = "true" & gt; & lt; / i & gt; & lt; / nút & gt;
            & lt; button type = "button" class = "btn btn-outline-default btn-round-effect" & gt; & lt; i class = "far fa-gem mr-2"
                aria-hidden = "true" & gt; & lt; / i & gt; Nút & lt; / button & gt;
            & lt; button type = "button" class = "btn btn-indigo btn-md" & gt; Button & lt; i class = "fas fa-thumbs-up ml-2" aria-hidden = "true" & gt; & lt; / i & gt ; & lt; / nút & gt;
            & lt; button type = "button" class = "btn btn-outline-warning wave-effect btn-sm" & gt; & lt; i class = "fas fa-user mr-2"
                aria-hidden = "true" & gt; & lt; / i & gt; Nút & lt; / button & gt;

          
        
    

Đặc trưng

Các biểu tượng rất hữu ích khi bạn muốn hiển thị các tính năng của một thứ gì đó. Xem tại đây để xem thêm các phần tính năng của chúng tôi.

Tại sao nó lại tuyệt vời như vậy?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.

Quốc tế

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả định
deleteniti hic.

Thử nghiệm

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả định
deleteniti hic.

Thư giãn

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả định
deleteniti hic.

Yêu quý

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả sử
deleteniti hic.

Nhanh chóng

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả định
deleteniti hic.

Kỳ diệu

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reperinderit maiores nam,
aperiam minima giả định
deleteniti hic.

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt;! - Phần: Các tính năng v.4 - & gt;
            & lt; phần & gt;

              & lt;! - Tiêu đề phần - & gt;
              & lt; h2 class = "h1 py-5 font-weight-bold text-center" & gt;
              & lt;! - Mô tả phần - & gt;
              & lt; p class = "px-5 MB-5 pb-3 chì xám-text text-center" & gt; Lorem Ipsum Pain Sit Amet, Consectetur Adipiscing Elite,
                sed do eiusmod tempor incididuntunting vượt qua và đau đớn lớn
                aliqua. Xuất ra bất kỳ quảng cáo tối thiểu nào. & Lt; / p & gt;

              & lt;! - Hàng lưới - & gt;
              & lt; div class = "row" & gt;

                & lt;! - Cột lưới - & gt;
                & lt; div class = "col-md-4" & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-flag-checkered deep-Purple-text" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-ball" & gt; Quốc tế & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum đau đớn cùng với, giới thượng lưu đam mê. Những người gửi thư đáng trách
                        thịt, aperiam minima giả sử
                        xóa hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-chai đậm-tím-văn bản" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-ball" & gt; Thử nghiệm & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum đau đớn cùng với, giới thượng lưu đam mê. Những người gửi thư đáng trách
                        thịt, aperiam minima giả sử
                        xóa hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-glass-martini-deep-Purple-text" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-ball" & gt; Thư giãn & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum đau đớn cùng với, giới thượng lưu đam mê. Những người gửi thư đáng trách
                        thịt, aperiam minima giả sử
                        xóa hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                & lt; / div & gt;
                & lt;! - Cột lưới - & gt;

                & lt;! - Cột lưới - & gt;
                & lt; div class = "col-md-4mb-2 center-on-small-only flex-center" & gt;
                  & lt; img src = "https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.webp" alt = "" class = "z-depth-0" & gt;
                & lt; / div & gt;
                & lt;! - Cột lưới - & gt;

                & lt;! - Cột lưới - & gt;
                & lt; div class = "col-md-4" & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-heart deep-Purple-text" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-ball" & gt; Được phép & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum đau đớn cùng với, giới thượng lưu đam mê. Những người gửi thư đáng trách
                        thịt, aperiam minima giả sử
                        xóa hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-bolt deep-Purple-text" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-ball" & gt; Nhanh & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum đau đớn cùng với, giới thượng lưu đam mê. Những người gửi thư đáng trách
                        thịt, aperiam minima giả sử
                        xóa hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                  & lt;! - Hàng lưới - & gt;
                  & lt; div class = "row mb-2" & gt;
                    & lt; div class = "col-2" & gt;
                      & lt; i class = "fas fa-2x fa-magic deep-Purple-text" & gt; & lt; / i & gt;
                    & lt; / div & gt;
                    & lt; div class = "col-10 text-left" & gt;
                      & lt; h5 class = "font-weight-bold" & gt; Magical & lt; / h5 & gt;
                      & lt; p class = "gray-text" & gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Thư tín
                        nam, aperiam minima assnda
                        deleteniti hic. & lt; / p & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                  & lt;! - Hàng lưới - & gt;

                & lt; / div & gt;
                & lt;! - Cột lưới - & gt;

              & lt; / div & gt;
              & lt;! - Hàng lưới - & gt;

            & lt; / phần & gt;
            & lt;! - / Phần: Các tính năng v.4 - & gt;

          
        
    

Danh sách đầy đủ

Để xem danh sách đầy đủ các biểu tượng có sẵn, hãy nhấp vào nút bên dưới


Danh sách biểu tượng


Xem thêm những thông tin liên quan đến chủ đề biểu tượng trong bootstrap 4

Sử dụng Bootstrap thiết Website cực đẹp trong 5 phút

  • Tác giả: Alias
  • Ngày đăng: 2020-04-18
  • Đánh giá: 4 ⭐ ( 4514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap css alias
    how to use bootstrap design website
    Trong video này mình hướng dẫn các bạn dùng bootstrap để thiết kế 1 website 1 cách đơn giản nhé. copy code vào là xong
    Link group học code: http://bit.ly/39eFZOi
    Link facebook cá nhân: http://bit.ly/38fi69c
    Link website: http://Alias.vn/
    Link đăng kí kênh để nhận video free: http://bit.ly/2SyBebr
    Đội ngũ Alias chuyên support IT cho các bạn ở đại học FPT Hà Nội – Ngoài ra còn support IT cho các bạn ở đại học Quốc Gia và Bách Khoa…
    Channel hướng dẫn các bạn lập trình C, C, C++, Java, Java desk, Java Web, jsp – servlet, web service, asp.net đồng thời hướng dẫn các bạn các thủ thuật hữu ích giúp cuộc sống đơn giản và dễ dàng hơn.
    Nếu nhạc nền bị gặp vấn đề bản quyền. Mong các bạn gửi mail tới trinhthehoan989@gmail.com. Mình sẽ trả lời lại trong vòng 2h ạ.

[Bootstrap 4] Phần 6: Bảng biểu

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 9848 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Biểu tượng icon trong CSS (CSS icon)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 8656 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thêm biểu tượng trong CSS, Biểu tượng Bootstrap, Các biểu tượng của Google

Bootstrap Icons

  • Tác giả: hiepsiit.com
  • Đánh giá: 5 ⭐ ( 3935 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các thành phần trong bootstrap 4

  • Tác giả: longnv.name.vn
  • Đánh giá: 4 ⭐ ( 7327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thành phần trong bootstrap 4 thì rất nhiều, bạn dùng chúng để tạo giao diện cho trang. Sau đây là các components thường dùng trong bootstrap 4

Bootstrap 4 – Di chuyển Glyphicons?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9061 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể sử dụng cả Font Awesome và Github Octicons như một sự thay thế…

Bootstrap 4 Icons

  • Tác giả: gokisoft.com
  • Đánh giá: 3 ⭐ ( 2625 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap 4 IconsBootstrap 4 không có thư viện biểu tượng riêng (Glyphicons của Bootstrap 3 không được hỗ trợ trong BS4). Tuy nhiên, có nhiều thư viện biểu tượng miễn phí để lựa chọn như Font Awesome hoặc […]

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  GeeksforGeeks - khai báo danh sách trong python