Thay đổi màu của glyphicons thành màu xanh ở một số- nhưng không phải ở tất cả các nơi bằng Bootstrap 2

Tôi đang sử dụng khung Bootstrap cho UI của mình. Tôi muốn thay đổi màu sắc của glyphicons của tôi thành màu xanh, nhưng không phải ở tất cả các nơi. Ở một số nơi nên sử dụng màu mặc định.

Tôi đã đề cập đến hai liên kết này, nhưng tôi không tìm thấy bất cứ điều gì hữu ích.

• Tôi có thể thêm màu vào biểu tượng bootstrap chỉ bằng CSS không?
• Làm cách nào để thay đổi glyphicons của Bootstrap 3 thành màu trắng?

Xin lưu ý: Tôi đang sử dụng Bootstrap 2.3.2 .

Biểu tượng sẽ thông qua màu từ giá trị của thuộc tính colorcss của nó.

Bạn có thể thêm trực tiếp vào kiểu này:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Hoặc bạn có thể thêm nó dưới dạng một lớp vào biểu tượng của mình và sau đó đặt màu phông chữ cho nó trong CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

Fiddle này có một ví dụ.

Chỉ cần áp dụng text-successlớp Twitter Bootstrap trên Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

Danh sách đầy đủ các màu có sẵn: Bootstrap Tài liệu: Các lớp trợ giúp
(Màu xanh cũng có mặt)

Cuối cùng tôi cũng tìm được câu trả lời. Để thêm các biểu tượng mới trong bootstrap 2.3.2, chúng ta phải thêm css Font Awsome trong tệp của bạn. Sau khi làm điều này, chúng ta có thể ghi đè lên các kiểu bằng css để thay đổi màu sắc và kích thước.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

Nếu chúng ta muốn thay đổi màu của biểu tượng thì chỉ cần thêm lớp màu nâu và biểu tượng sẽ chuyển sang màu nâu. Nó cũng cung cấp biểu tượng của kích thước khác nhau.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Bạn có thể làm điều này là tốt, hy vọng sẽ giúp

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Đối với bootstrap 3.0, điều này làm việc cho tôi:

.myclass .glyphicon {color:blue !important;}

Có, bạn có thể đặt các biểu tượng thành màu trắng. đây là cách nó làm việc cho tôi

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

Điều này sẽ làm cho biểu tượng của bạn xuất hiện màu trắng.

Tôi đã tạo một thư viện màu thay thế cho bootstrap 2.3.2. Nó có sẵn và đơn giản để sử dụng cho bất kỳ ai quan tâm đến nhiều màu sắc hơn cho thư viện glyphicons cũ.

Nếu nó chỉ là một biểu tượng bootstrap. Lưu ý rằng các biểu tượng dưới văn bản hoặc kiểu chữ. Chỉ cần thêm lớp màu văn bản như thế này. Ví dụ: văn bản chính, thông tin văn bản, v.v. đến lớp biểu tượng:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

Bootstrap> = v4.0 bỏ hỗ trợ glyphicon

Bỏ phông chữ biểu tượng Glyphicons. Nếu bạn cần biểu tượng, một số tùy chọn là:

phiên bản ngược dòng của Glyphicons

Octicons

Phông chữ tuyệt vời

Nguồn: https://v4-alpha.getbootstrap.com/migration/#components

Nếu bạn đang sử dụng Bootstrap> = v4.0 hoặc mới hơn, bạn có thể sử dụng các lớp bootstrap kiểu hiện có text-success, text-warningv.v.

Ví dụ: nếu bạn đang sử dụng fontawgie:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glyphicons bị xóa trong 4.0, tôi khuyên dùng Font-awesome 4 hoặc mới hơn :)

Tất cả các câu trả lời trước đều đúng nhưng đây là một cách đơn giản và nhanh chóng nếu bạn chỉ cần một biểu tượng ở một nơi để thay đổi màu sắc của nó:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

Màu không hoạt động, nếu bạn sử dụng cho hình ảnh png phông chữ bootstrap, như i.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5 sử dụng bộ lọc css để tô màu hình ảnh, ví dụ

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);