Bisakah saya menambahkan warna ke ikon bootstrap hanya menggunakan CSS?


159

Bootstrap Twitter menggunakan Ikon oleh Glyphicons . Mereka " available in dark gray and white" secara default:

Gambar-58.png

Apakah mungkin menggunakan beberapa tipuan CSS untuk mengubah warna ikon? Saya berharap untuk beberapa kecemerlangan CSS3 lain yang akan mencegah harus memiliki ikon gambar yang ditetapkan untuk setiap warna.

Saya tahu Anda dapat mengubah warna latar belakang <i>elemen terlampir ( ), tapi saya berbicara tentang warna ikon foreground. Saya kira akan mungkin untuk membalik transparansi pada gambar ikon dan kemudian mengatur warna latar belakang.

Jadi, dapatkah saya menambahkan warna ke ikon bootstrap hanya menggunakan CSS?


Saya rasa tidak ... Tapi Anda mungkin bisa melakukannya dengan javascript dan elemen kanvas.
bfavaretto

@ bfavaretto - dapatkah Anda menjelaskan? maksud Anda datang dengan kode / koordinat untuk menggambar masing-masing ikon atau menggunakan gambar png yang ada entah bagaimana?
cwd

1
Maaf, saya tidak cukup berpengalaman dengan elemen kanvas untuk menyarankan Anda kode, tetapi saya tahu Anda dapat memanipulasi piksel secara individual dengan kanvas.
bfavaretto

Jawaban:


189

Ya, jika Anda menggunakan Font Awesome dengan Bootstrap! Ikonnya sedikit berbeda, tetapi ada lebih banyak, mereka tampak hebat pada ukuran berapa pun, dan Anda dapat mengubah warnanya.

Pada dasarnya ikon adalah font dan Anda dapat mengubah warna hanya dengan properti warna CSS. Instruksi integrasi ada di bagian bawah halaman di tautan yang disediakan.


Sunting: Ikon Bootstrap 3.0.0 sekarang menjadi font!

Seperti beberapa orang lain juga telah menyebutkan dengan rilis Bootstrap 3.0.0, ikon default mesin terbang sekarang font seperti Font Awesome, dan warnanya dapat diubah hanya dengan mengubah colorproperti CSS. Mengubah ukuran dapat dilakukan melalui font-sizeproperti.


9
Ahh, pintar! Jangan lupa atur cursor: default;agar pengguna tidak melihat I-Bar. Juga, periksa FF Chartwell, font yang sangat pintar: tktype.com/chartwell.php
Dai

4
Saat Anda mengarahkan teks (seperti dalam pengolah kata) kursor Anda terlihat seperti huruf kapital " I" besar, digunakan untuk memilih teks. Dalam CSS itu disebut sebagai cursor: text;. Itu juga dikenal sebagai "I-beam".
Dai

38

Dengan rilis terbaru Bootstrap RC 3, mengubah warna ikon semudah menambahkan kelas dengan warna yang Anda inginkan dan menambahkannya ke rentang.

Warna hitam default:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

akan menjadi

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Daftar Bootstrap 3 Glyphicons


17

Karena glyphicons sekarang adalah font, kita dapat menggunakan kelas kontekstual untuk menerapkan warna yang sesuai ke ikon.

Sebagai contoh: <span class="glyphicon glyphicon-info-sign text-info"></span> menambahkan text-infoke css akan membuat ikon info warna biru.


Terima kasih sedang mencari cara untuk menerapkan kelas kontekstual. Setiap kelas teks- * kontekstual akan berfungsi
Dustin Hodges

14

Cara lain yang memungkinkan untuk memiliki ikon bootstrap dalam warna berbeda adalah dengan membuat .png baru dalam warna yang diinginkan, (mis. Magenta) dan menyimpannya sebagai / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

Di variable.less temukan

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

dan tambahkan baris ini

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

Di tambahkan sprite Anda

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

Dan gunakan seperti ini:

<i class='icon-chevron-down icon-magenta'></i>

Semoga ini bisa membantu seseorang.


5
hanya ingin mengulangiI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color
cwd

Tidak dapat dilakukan sepenuhnya melalui CSS yang juga kompatibel dengan browser. Biasanya orang membutuhkan skema warna dengan ikon terkait - jadi saya akan mengatakan hingga 5 set warna tidak banyak tantangan.
foxybagga

@seppludger Bagaimana Anda membuat sprite warna halfling baru? Sudahkah Anda berhasil melakukan ini? Saya tidak dapat mengubah warna jika memuatnya di editor grafis apa pun.
Norman

7

Pekerjaan cepat dan kotor di sekitar yang melakukannya untuk saya, tidak benar-benar mewarnai ikon, tetapi mengelilinginya dengan label atau lencana dalam warna yang Anda inginkan;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

Jawaban Anda bermanfaat, + 1. Saya ingin menggunakan ikon edit dan ingin memberi warna kuning. Bisakah Anda memberi tahu saya cara melakukannya?

Yah Anda bisa mengubah ikon-ok untuk sesuatu yang lain; mis. <span class = "label-warning label"> <i class = "icon- <iconname> icon-white"> </i> </span>. Misalnya: <span class = "label-warning label"> <i class = "ikon-edit ikon-putih"> </i> </span>. Lebih baik pergi untuk imo bootstrap baru ..
frbl

6

Bootstrap Glyphicons adalah font. Ini berarti dapat diubah seperti teks lainnya melalui styling CSS.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Contoh:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>


Tonton kursus Up and Running with Bootstrap 3 oleh Jen Kramer, atau saksikan pelajaran individual tentang Overriding core CSS dengan gaya khusus .


4

Ini semua agak bundaran ..

Saya telah menggunakan mesin terbang seperti ini

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

dan untuk mempengaruhi warna, saya menyertakan sedikit css di kepala seperti ini

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, ibu jari hijau dan merah.


4

Juga berfungsi dengan tag gaya:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

masukkan deskripsi gambar di sini


3

Ini sebenarnya sangat mudah:

cukup gunakan:

.icon-name{
color: #0C0;}

Sebagai contoh:

.icon-compass{
color: #C30;}

Itu dia.


3

Gunakan mask-imageproperti, tapi ini sedikit peretasan. Itu ditunjukkan di blog Safari di sini .

Ini juga dijelaskan secara mendalam di sini .

Pada dasarnya Anda akan membuat kotak CSS, dengan mengatakan a background-image: gradient(foo);dan kemudian menerapkan topeng gambar untuk itu berdasarkan pada gambar-gambar PNG.

Ini akan menghemat waktu pengembangan Anda membuat gambar individual di Photoshop, tetapi saya tidak berpikir itu akan menghemat banyak bandwidth kecuali Anda akan menampilkan gambar dalam berbagai warna. Secara pribadi saya tidak akan menggunakannya karena Anda perlu menyesuaikan markup Anda untuk menggunakan teknik ini secara efektif, tetapi saya adalah anggota sekolah pemikiran "purity is imperitive".


1
Perlu diingat dukungan untuk mask-imageproperti tidak terlalu bagus .
Scott Bartell

1

Jawaban yang diterima (menggunakan font yang luar biasa) adalah yang benar. Tapi karena saya hanya ingin varian merah untuk ditampilkan pada kesalahan validasi, saya akhirnya menggunakan paket addon, silakan ditawarkan di situs ini .

Hanya mengedit jalur url dalam file css karena mereka mutlak (mulai dengan /) dan saya lebih suka relatif. Seperti ini:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

Akhirnya, yang kompatibel dengan Bootstrap versi lama
Dmitry Ginzburg

1

Anda dapat mengubah warna secara global juga

yaitu

 .glyphicon {
       color: #008cba; 
   }


0

Saya berpikir bahwa saya mungkin menambahkan cuplikan ini ke pos lama ini. Ini adalah apa yang telah saya lakukan di masa lalu, sebelum ikonnya adalah font:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

Ini sangat mirip dengan jawaban licik @frbl, namun tidak menggunakan gambar lain. Sebagai gantinya, ini menetapkan warna latar <i>elemen whitedan menggunakan properti CSS border-radiusuntuk membuat seluruh <i>elemen "bulat". Jika Anda perhatikan, nilai border-radius(7.5px) tepat setengah dari properti widthdan height(keduanya 15px, membuat ikon persegi), membuat <i>elemen melingkar.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.