Comment ajouter une icône personnalisée dans Twitter Bootstrap ?

Question

J'ajoute l'icône avec Twitter Bootstrap sans problème. Ils ont beaucoup d'alternatives.

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

Cependant, je n'ai pas trouvé d'icône appropriée pour l'un des éléments du menu. Il s'agit de "voiture". Ce que je veux, c'est ajouter mon icône personnalisée. Comment puis-je le faire ?

Answer 1

Vous pouvez créer votre propre icône en la définissant dans votre propre classe comme s :

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

En gardant à l'esprit bien sûr d'utiliser le préfixe .icon-* puisqu'il est ciblé par un sélecteur d'attribut défini par le bootstrap pour appliquer tous les styles (widh/height/line-height etc...).

Essayez de garder la même largeur et la même hauteur que les icônes d'origine (14x14), de cette façon vous n'aurez pas à définir votre propre largeur et hauteur et cela ne perturbera pas l'affichage de l'image. line-height de vos éléments. Voici une démo avec un tel cas : http://jsfiddle.net/RwFeu/

Answer 2

Voici ce que nous faisons, afin que toutes les icônes soient dans un seul fichier sprite et que vous puissiez autoriser des icônes de taille arbitraire.

créer un fichier CSS comme

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

Et ensuite, dans votre balisage,

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

Notez que cela suppose un seul fichier sprites qui contient toutes les icônes. Si vous disposez de plusieurs fichiers sprites, l'option background-image doit être défini pour chaque icône, en conséquence.

JSFiddle à http://jsfiddle.net/shyamh/cvHdt/

Cette solution est basée sur l'exemple publié par Kevin

Answer 3

Utilisez les icônes de police, pour une meilleure performance. Par exemple :

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

.icon-linkedin:before {
    font-family: 'FontAwesome', sans-serif;
    content: "\f0e1"; 
}