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

157

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.

Harap dicatat: Saya menggunakan Bootstrap 2.3.2 .

html css twitter-bootstrap-2

— Mike Phils
sumber

275

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.

— Vikas Ghodke
sumber

6

Terima kasih. Saya menggunakan Bootstrap /2.3.2/.Ini tidak berfungsi untuk saya.

— Mike Phils

1

Anda masih dapat menggunakannya, hapus semua aturan css untuk glyphicon dan tambahkan file css ini netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… dan unduh font glyphicon dari bootstrap 3, ini akan berhasil.

— Vikas Ghodke

3

@VikasGhodke, itu masih akan membutuhkan migrasi seluruh proyek ke versi 3.

— Maksim Vi.

194

Cukup terapkan text-successkelas Bootstrap Twitter di Glyphicon:

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

masukkan deskripsi gambar di sini

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

— itsnikolay
sumber

2

mengapa mencampur jeruk dengan apel? : \

— USer22999299

7

* начал работуadalah started a work. Saya akan menulis jawaban dengan cepat dan saya tidak berpikir bahwa itu akan terpilih. Jadi tangkapan layar dibuat dalam bahasa Rusia dari aplikasi saya sebelumnya untuk menunjukkan bagaimana tampilan markup.

— itsnikolay

3

Saya merasa sangat tepat jika ikon harus ditampilkan dengan tepat karena ada keberhasilan dalam operasi.

— Terix

6

Ini lebih baik karena warna yang diterapkan akan sesuai dengan skema warna tema Bootstrap saat ini

— Remus Rusanu

2

@naXa coba text-danger. Berikut daftar lengkap warna.

— naXa

24

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>

— Mike Phils
sumber

2

Versi yang lebih baru (4.0.3 pada saat komentar ini) tersedia di bootstrapcdn.com/#fontawesome_tab

— wizulus

7

Anda dapat melakukan ini juga, semoga membantu

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

— Guven Sezgin Kurt
sumber

7

Untuk bootstrap 3.0, ini berfungsi untuk saya:

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

— puddleglum
sumber

3

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.

— AJ
sumber

3

Yang icon-whitebekerja untuk saya dengan Bootstrap 2. Pertanyaannya meminta biru, tetapi mengetahui ada satu kelas untuk putih tampaknya berguna.

— smholloway

3

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.

— Eric Uldall
sumber

2

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>

— Putih. Gagak
sumber

2

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>

— Caner
sumber

2

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 :)

— Michael Jørgensen
sumber

1

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>

— grepit
sumber

0

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);

— Peter Mlich
sumber