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;
}
4 và tên của biểu tượng. Các biểu tượng được thiết kế để sử dụng với các phần tử nội tuyến [chúng tôi thích thẻ body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
5 cho ngắn gọn, nhưng 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;
}
5 đúng ngữ nghĩa 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
body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
7, body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
8, body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
9 [tăng 33%] hoặc sử dụng kích thước chữ [để chia tỷ lệ từ 1x lên 10x]
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
8 trên phần tử HTML tham chiếu biểu tượng của bạn để đặt một hoặc nhiều biểu tượng có cùng chiều rộng cố định. Điều này thật tuyệt khi sử dụng khi thay đổi độ rộng của biểu tượng [e. g. một biểu tượng cao nhưng gầy phía trên một biểu tượng rộng nhưng ngắn] sẽ làm mất căn chỉnh theo chiều dọc. Để rõ ràng trong ví dụ sau, chúng tôi đã thêm màu nền trên biểu tượng để bạn có thể thấy chiều rộng cố định và cũng tăng kích thước phông chữ của phần tử gốc Dưới đây là danh sách tất cả Bootstrap 3 Glyphicons
Ghi chú. Glyphicons không được hỗ trợ trong Bootstrap 4
IconDescriptionExampleglyphicon glyphicon-asteriskTry itglyphicon glyphicon-plusTry itglyphicon glyphicon-minusTry itglyphicon glyphicon-eurTry itglyphicon glyphicon-euroTry itglyphicon glyphicon-cloudTry itglyphicon glyphicon-envelopeTry itglyphicon glyphicon-pencilTry itglyphicon glyphicon-glassTry itglyphicon glyphicon-musicTry itglyphicon glyphicon-searchTry itglyphicon glyphicon-heartTry itglyphicon glyphicon