Ubah warna glyphicons menjadi biru di beberapa tempat tetapi tidak di semua tempat menggunakan Bootstrap 2

Saya menggunakan kerangka kerja Bootstrap untuk UI saya. Saya ingin mengubah warna glyphicons saya menjadi biru, tetapi tidak di semua tempat. Di beberapa tempat harus menggunakan warna default.

Saya telah merujuk ke dua tautan ini, tetapi saya tidak menemukan sesuatu yang bermanfaat.

• Bisakah saya menambahkan warna ke ikon bootstrap hanya menggunakan CSS?
• Bagaimana cara mengubah glyphicons Bootstrap 3 menjadi putih?

Harap dicatat: Saya menggunakan Bootstrap 2.3.2 .

Ikon akan mengadopsi warna dari nilai colorproperti css dari induknya.

Anda dapat menambahkan ini langsung ke gaya:

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

Atau Anda dapat menambahkannya sebagai kelas ke ikon Anda dan kemudian mengatur warna font ke dalam 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;
}

Biola ini memiliki contoh.

Cukup terapkan text-successkelas Bootstrap Twitter di Glyphicon:

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

Daftar lengkap warna yang tersedia: Dokumentasi Bootstrap: Kelas pembantu
(Biru juga ada)

Akhirnya saya menemukan jawabannya sendiri. Untuk menambahkan ikon baru di 2.3.2 bootstrap kita harus menambahkan Font Awsome css di file Anda. Setelah melakukan ini, kita dapat mengganti gaya dengan css untuk mengubah warna dan ukuran.

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

CSS

.brown{color:#9b846b}

Jika kita ingin mengubah warna ikon maka tambahkan saja kelas cokelat dan ikon akan berubah menjadi warna coklat. Ini juga menyediakan ikon berbagai ukuran.

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>

Anda dapat melakukan ini juga, semoga membantu

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

Untuk bootstrap 3.0, ini berfungsi untuk saya:

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

Ya, Anda dapat mengatur ikon ke warna putih. ini dia cara kerjanya.

Bootstrap <3

HTML

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

Ini akan membuat ikon Anda tampak putih.

Saya membuat pustaka warna alternatif untuk bootstrap 2.3.2 ini tersedia dan mudah digunakan untuk siapa saja yang tertarik pada lebih banyak warna untuk pustaka glyphicons lama.

Jika itu hanya ikon bootstrap. Perhatikan bahwa ikon di bawah teks atau lebih tepatnya tipografi. Cukup tambahkan kelas warna teks seperti ini. Misalnya teks-primer, teks-info dan sebagainya dan sebagainya ke kelas ikon:

<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 menjatuhkan dukungan glyphicon

Menjatuhkan font ikon Glyphicons. Jika Anda membutuhkan ikon, beberapa opsi adalah:

versi hulu Glyphicons

Oktikon

Font yang mengagumkan

Sumber: https://v4-alpha.getbootstrap.com/migration/#components

Jika Anda menggunakan Bootstrap> = v4.0 atau yang lebih baru, Anda dapat menggunakan kelas gaya bootstrap yang ada seperti text-success,text-warning dll.

Misalnya, jika Anda menggunakan fontawesome:

<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 dihapus pada 4.0, saya sarankan Font-awesome 4 atau lebih baru :)

Semua jawaban sebelumnya benar tetapi di sini adalah cara yang sederhana dan cepat jika Anda hanya perlu satu ikon di satu tempat untuk mengubah warnanya:

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

Warna tidak berfungsi, jika Anda menggunakan untuk font png bootstrap, seperti saya.

[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 menggunakan filter css untuk mewarnai gambar, misalnya

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