Chỉnh sửa biểu tượng Bootstrap

Sử dụng các biểu tượng là tuyệt vời cho mọi trang web vì chúng cung cấp thông tin trực quan dễ dàng. Nhưng nếu bạn muốn thay đổi màu tiêu chuẩn của biểu tượng Bootstrap thì sao? . Vì vậy, điều này có thể được thực hiện với thuộc tính màu CSS. Bạn cũng có thể thay đổi cỡ chữ

Trong đoạn mã này, chúng tôi sẽ trình bày cách thực hiện từng bước. Bắt đầu với việc tạo HTML

• Sử dụng phần tử cho tiêu đề và phần tử cho biểu tượng
• Để nhập biểu tượng, trong phần, hãy sử dụng phần tử có thuộc tính rel và href

  
    Title of the document
    
  
  
    Example
    
    
    
  

• Chỉ định thuộc tính text-align cho phần tử
• Đặt hiển thị thành “inline-block” và chỉ định phần đệm cho phần tử .
• Đặt riêng thuộc tính màu cho "icon-green" và "icon-red"
• Đặt kích thước phông chữ của "biểu tượng lớn"

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

Bây giờ, chúng ta có thể thấy mã đầy đủ

  
    Title of the document
    
    
  
  
    Example
    
    
    
  

Trong ví dụ của chúng tôi, ba biểu tượng được sử dụng. Chúng tôi đã thay đổi màu của hai biểu tượng và cỡ chữ của một biểu tượng

Bạn có thể đặt các biểu tượng ở bất kỳ đâu bằng cách sử dụng Tiền tố CSS

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

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

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

Bạn có thể làm cho tất cả các biểu tượng của mình có cùng chiều rộng để chúng có thể dễ dàng căn chỉnh theo chiều dọc, chẳng hạn như trong danh sách hoặc menu điều hướng

Thêm một lớp

Dưới đây là danh sách tất cả Bootstrap 3 Glyphicons

Ghi chú. Glyphicons không được hỗ trợ trong Bootstrap 4

Làm cách nào để đặt biểu tượng trong Bootstrap?

Làm cách nào để thay đổi kích thước biểu tượng trong Bootstrap?

Làm cách nào để thay đổi màu của các biểu tượng Bootstrap?