web-dev-qa-db-fra.com

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

J'ajoute une 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 de menu. Il s'agit de "voiture". Ce que je veux, c'est que je voudrais ajouter mon icône personnalisée. Comment puis-je faire ceci?

cssxhtmltwitter-bootstrap
38
SNaRe

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

Gardant à l'esprit bien sûr d'utiliser le préfixe .icon-* car 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 simplement de conserver la même largeur et la même hauteur que les icônes d'origine (14 x 14), de cette façon, vous n'aurez pas à définir votre propre largeur et hauteur et cela ne gâchera pas avec le line-height de vos éléments. Voici une démo avec un tel cas: http://jsfiddle.net/RwFeu/

64
Andres Ilich

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 puis 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 contenant toutes les icônes. Si vous avez plusieurs fichiers Sprite, le background-image doit être défini pour chaque icône, en conséquence.

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

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

14
Shyam Habarakada