Làm cách nào để thêm biểu tượng tùy chỉnh vào Twitter Bootstrap?

Question

Tôi đang thêm biểu tượng với Twitter Bootstrap mà không gặp vấn đề gì. Họ có rất nhiều lựa chọn thay thế.

http://twitter.github.com/bootstrap/base-css.html#icons

Tuy nhiên, tôi không thể tìm thấy biểu tượng thích hợp cho một trong những mục trình đơn. Đó là về "xe hơi". Điều tôi muốn là tôi muốn thêm biểu tượng tùy chỉnh của mình. Tôi có thể làm cái này như thế nào?

Answer 1

Bạn có thể tạo biểu tượng của riêng bạn bằng cách định nghĩa nó trong lớp học của riêng bạn như s:

.icon-car { 
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); 
    background-position: center center; 
} 

Giữ trong tâm trí tất nhiên để sử dụng tiền tố .icon-* kể từ khi nó được nhắm mục tiêu bởi một selector thuộc tính được thiết lập bởi bootstrap để áp dụng tất cả các kiểu (widh/height/line-height etc ...).

Chỉ cần cố gắng giữ cùng chiều rộng và chiều cao như biểu tượng ban đầu (14x14), theo cách này bạn sẽ không phải xác định chiều rộng và chiều cao của chính mình và nó sẽ không gây rối với các yếu tố của bạn. Dưới đây là một bản demo với trường hợp như vậy: http://jsfiddle.net/RwFeu/

Answer 2

Đây là những gì chúng tôi làm, để tất cả các biểu tượng nằm trong một tệp sprite duy nhất và bạn có thể cho phép các biểu tượng có kích thước tùy ý.

tạo một file CSS như

[class^="icon-custom-"], 
[class*=" icon-custom-"] { 
    background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8"); 
} 

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; } 
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px } 

Và sau đó trong đánh dấu của bạn,

<i class="icon-search"></i> a standard bootstrap icon 
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file. 
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon 
<!-- spritefile from www.10000ft.com. not for reuse, please --> 

Lưu ý rằng điều này giả định một file sprites có chứa tất cả các biểu tượng. Nếu bạn có nhiều tệp sprite, thì cần phải đặt background-image cho mỗi biểu tượng, theo đó.

JSFiddle tại http://jsfiddle.net/shyamh/cvHdt/

giải pháp này được dựa trên các ví dụ được đăng bởi Kevin