Bisakah saya menambahkan warna ke ikon bootstrap hanya menggunakan CSS?

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

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?

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.

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

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.

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.

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>

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 .

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.

Juga berfungsi dengan tag gaya:

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

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

Ini sebenarnya sangat mudah:

cukup gunakan:

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

Sebagai contoh:

.icon-compass{
color: #C30;}

Itu dia.

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".

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

Anda dapat mengubah warna secara global juga

yaitu

 .glyphicon {
       color: #008cba; 
   }

Cukup gunakan GLYPHICONS dan Anda akan dapat mengubah warna hanya dengan mengatur CSS:

#myglyphcustom {
    color:#F00;
}

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.