Tôi có thể thêm màu vào biểu tượng bootstrap chỉ bằng CSS không?

159

Bootstrap của Twitter sử dụng Biểu tượng của Glyphicons . Chúng là " available in dark gray and white" theo mặc định:

Ảnh-58.png

Có thể sử dụng một số thủ thuật CSS để thay đổi màu sắc của các biểu tượng? Tôi đã hy vọng cho một số sáng chói css3 khác sẽ ngăn không phải có một hình ảnh biểu tượng cho mỗi màu.

Tôi biết bạn có thể thay đổi màu nền của phần tử kèm theo ( ), nhưng tôi đang nói về biểu tượng màu nền trước. Tôi đoán có thể đảo ngược độ trong suốt trên hình ảnh biểu tượng và sau đó đặt màu nền.

Vì vậy, tôi có thể thêm màu vào các biểu tượng bootstrap chỉ bằng CSS không?

— cwd
nguồn

Tôi không nghĩ vậy ... Nhưng có lẽ bạn có thể làm điều đó với javascript và một yếu tố canvas.

— bfavaretto

@bfavaretto - bạn có thể giải thích? bạn có nghĩa là đến với mã / tọa độ để vẽ từng biểu tượng hoặc sử dụng hình ảnh png hiện có bằng cách nào đó?

— cwd

1

Xin lỗi, tôi không đủ kinh nghiệm với phần tử canvas để đề xuất mã cho bạn, nhưng tôi biết bạn có thể thao tác các pixel riêng lẻ bằng một khung vẽ.

— bfavaretto

189

Có, nếu bạn sử dụng Font Awesome với Bootstrap! Các biểu tượng hơi khác nhau, nhưng có nhiều hơn, chúng trông tuyệt vời ở bất kỳ kích thước nào, và bạn có thể thay đổi màu sắc của chúng.

Về cơ bản các biểu tượng là phông chữ và bạn có thể thay đổi màu sắc của chúng chỉ với thuộc tính màu CSS. Hướng dẫn tích hợp nằm ở cuối trang trong liên kết được cung cấp.

Chỉnh sửa: Các biểu tượng Bootstrap 3.0.0 hiện là phông chữ!

Như một số người khác cũng đã đề cập với việc phát hành Bootstrap 3.0.0, glyphs biểu tượng mặc định hiện là phông chữ như Font Awesome và màu sắc có thể được thay đổi chỉ bằng cách thay đổi thuộc tính colorCSS. Thay đổi kích thước có thể được thực hiện thông qua font-sizetài sản.

— hajpoj
nguồn

9

Ahh, thông minh! Đừng quên đặt cursor: default;để người dùng không nhìn thấy I-Bar. Ngoài ra, hãy xem FF Chartwell, một phông chữ thực sự thông minh: tktype.com/chartwell.php

— Đại

4

Khi bạn di chuột qua văn bản (như trong trình xử lý văn bản), con trỏ của bạn trông giống như một Iký tự " quá khổ ", nó được sử dụng để chọn văn bản. Trong CSS, nó được gọi là cursor: text;. Nó còn được gọi là "I-tia".

— Đại

38

Với phiên bản mới nhất của Bootstrap RC 3, việc thay đổi màu sắc của các biểu tượng cũng đơn giản như thêm một lớp với màu bạn muốn và thêm nó vào nhịp.

Màu đen mặc định:

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

sẽ trở thành

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

CSS

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

Danh sách Bootstrap 3 Glyphicons

— fseminario
nguồn

17

Vì glyphicons hiện là phông chữ, người ta có thể sử dụng các lớp theo ngữ cảnh để áp dụng màu thích hợp cho các biểu tượng.

Ví dụ:  thêm text-infovào css sẽ làm cho biểu tượng có màu xanh thông tin.

— truncie
nguồn

Cảm ơn đã tìm kiếm một cách để áp dụng các lớp theo ngữ cảnh. Bất kỳ lớp nào trong văn bản- * ngữ cảnh sẽ hoạt động

— Dustin Hodges

14

Một cách khác có thể để có các biểu tượng bootstrap có màu khác là tạo một .png mới theo màu mong muốn, ví dụ: magenta) và lưu nó dưới dạng / path-to-bootstrap-css / img / glyphicons-Halflings- magenta .png

Trong biến của bạn. Không tìm thấy

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

và thêm dòng này

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

Trong spites của bạn. Không thêm

/* 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}");
}

Và sử dụng nó như thế này:

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

Hy vọng nó sẽ giúp được ai đó.

— Sepp Ludger
nguồn

5

chỉ muốn nhắc lạiI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

Không thể được thực hiện hoàn toàn thông qua CSS cũng tương thích với trình duyệt chéo. Thông thường mọi người cần một bảng màu với các biểu tượng liên quan - vì vậy tôi sẽ nói tối đa 5 bộ màu không phải là một thách thức lớn.

— foxybagga

@seppludger Làm thế nào để bạn tạo một sprite nửa màu mới? Bạn đã thành công trong việc này? Tôi không thể thay đổi màu sắc nếu tôi tải chúng trong bất kỳ trình chỉnh sửa đồ họa nào.

— Norman

7

Công việc nhanh chóng và bẩn thỉu đã làm điều đó cho tôi, không thực sự tô màu cho biểu tượng, mà bao quanh nó với một nhãn hoặc huy hiệu theo màu bạn muốn;

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

— frbl
nguồn

Câu trả lời của bạn rất hữu ích, + 1.Tôi muốn sử dụng biểu tượng chỉnh sửa và muốn đặt màu vàng. Bạn có thể vui lòng cho tôi biết làm thế nào để làm điều đó?

Chà, bạn chỉ có thể thay đổi biểu tượng-ok thành một cái gì đó khác; ví dụ icon-trắng"> . Ví dụ: . Nó là tốt hơn để đi cho bootstrap imo mới ..

— frbl

6

Bootstrap Glyphicons là phông chữ. Điều này có nghĩa là nó có thể được thay đổi như bất kỳ văn bản nào khác thông qua kiểu CSS.

CSS:

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

HTML:

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

Thí dụ:

<!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>

Xem khóa học Up and Running with Bootstrap 3 của Jen Kramer hoặc xem bài học cá nhân về Ghi đè CSS lõi với các kiểu tùy chỉnh .

— Eugene
nguồn

4

Đây là tất cả một chút bùng binh ..

Tôi đã sử dụng glyphs như thế này

  </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>

và để ảnh hưởng đến màu sắc, tôi đã bao gồm một chút css ở đầu như thế này

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

Voila, ngón tay cái màu xanh lá cây và đỏ.

— Quái vật X
nguồn

4

Cũng hoạt động với thẻ kiểu:

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

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

nhập mô tả hình ảnh ở đây

— joan16v
nguồn

3

Nó thực sự rất dễ dàng:

chỉ dùng:

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

Ví dụ:

.icon-compass{
color: #C30;}

Đó là nó.

— Aniruddh Dixit
nguồn

3

Sử dụng mask-imagetài sản, nhưng đó là một chút hack. Nó được thể hiện trong blog Safari ở đây .

Nó cũng được mô tả sâu ở đây .

Về cơ bản, bạn sẽ tạo một hộp CSS, bằng cách nói background-image: gradient(foo);và sau đó áp dụng mặt nạ hình ảnh cho nó dựa trên những hình ảnh PNG đó.

Nó sẽ giúp bạn tiết kiệm thời gian phát triển để tạo các hình ảnh riêng lẻ trong Photoshop, nhưng tôi không nghĩ rằng nó sẽ tiết kiệm nhiều băng thông trừ khi bạn sẽ hiển thị hình ảnh với nhiều màu sắc khác nhau. Cá nhân tôi sẽ không sử dụng nó bởi vì bạn cần điều chỉnh đánh dấu của mình để sử dụng kỹ thuật này một cách hiệu quả, nhưng tôi là thành viên của trường phái tư duy "thuần túy là bắt buộc".

— Đại
nguồn

1

Hãy ghi nhớ hỗ trợ cho mask-imagetài sản không phải là tuyệt vời .

— Scott Bartell

1

Câu trả lời được chấp nhận (sử dụng phông chữ tuyệt vời) là câu trả lời đúng. Nhưng vì tôi chỉ muốn biến thể màu đỏ hiển thị trên các lỗi xác thực, tôi đã kết thúc bằng cách sử dụng gói addon, vui lòng cung cấp trên trang web này .

Chỉ cần chỉnh sửa đường dẫn url trong tệp css vì chúng là tuyệt đối (bắt đầu bằng /) và tôi thích là tương đối. Như thế này:

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

— mppfiles
nguồn

Cuối cùng, phiên bản tương thích với các phiên bản cũ của Bootstrap

— Dmitry Ginzburg

1

Bạn cũng có thể thay đổi màu sắc trên toàn cầu

I E

 .glyphicon {
       color: #008cba; 
   }

— Nhà phát triển
nguồn

1

Chỉ cần sử dụng GLYPHICONS và bạn sẽ có thể thay đổi màu sắc chỉ bằng cách đặt CSS:

#myglyphcustom {
    color:#F00;
}

— Valter Lorran
nguồn

0

Tôi nghĩ rằng tôi có thể thêm đoạn trích này vào bài viết cũ này. Đây là những gì tôi đã làm trong quá khứ, trước khi các biểu tượng là phông chữ:

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

Điều này rất giống với câu trả lời lén lút của @frbl, nhưng nó không sử dụng hình ảnh khác. Thay vào đó, điều này đặt màu nền của phần tử thành whitevà sử dụng thuộc tính CSS border-radiusđể làm cho toàn bộ phần tử được "làm tròn". Nếu bạn nhận thấy, giá trị của border-radius(7.5px) chính xác bằng một nửa so với thuộc tính widthvà thuộc heighttính (cả 15px, làm cho biểu tượng vuông), làm cho phần tử trở thành hình tròn.

— Người thích web
nguồn