Utilisez une image à la place du glyphicon de Bootstrap
Je voudrais utiliser une image personnalisée dans un input-group
au lieu d'un "Bootstrap" glyphicon sans rembourrage bas (mon image de toucher le bas du bouton), comme vous pouvez le voir sur cette photo:
En fait, j'utilise Bootstrap est glyphicon glyphicon-search
:
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ..."/>
<span class="input-group-addon">
<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
</div>
Mon problème est que je n'arrive pas à remplacer glyphicon par mon image dans ma barre de recherche.
J'ai essayé de créer le CSS pour imiter celles de Bootstrap, mais il y a toujours rendu mauvais:
CSS
.glyphi {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
float: left;
display: block;
}
.glyphi.search {
background: url(../img/header/search.png);
background-size: cover;
}
.glyphi.normal {
width: 28px; //But Bootstrap glyphicon is 16x16...
height: 16px;
}
HTML
<span class="glyphicon glyphicon-search"></span>
Remarque que mon image n'est pas carrée (60x37 px).
Ici est l'image qui devrait remplacer le glyphicon
:
Quel est le meilleur Bootstrap façon de le faire?
Voici une Bootply de mon code.
Merci! 🙂
source d'informationauteur Mistalis
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser de simples
img
à l'intérieur de.input-group-addon
au lieu despan.glyphicon
et avec certains des marges négatives, vous pouvez obtenir le résultat que vous souhaitez.HTML
CSS
mise à Jour de Bootply
Vous devriez avoir un regard sur la façon dont le glyphicon
span
œuvres:Si vous examiner, vous verrez que la partie la plus intéressante dans ce
span
est en fait son pseudo-élément, le:before
qui appelle une police d'icônes comme un contenu.Quelques solutions sont possible pour résoudre votre problème.
Remplacer
L'une des solution serait de remplacer le pseudo par élément
redeclaring son contenu:
Démo 1
Personnalisé span
Une autre solution, qui serait probablement mieux, serait de
en fait de créer votre propre span avec votre propre pseudo-élément (CSS est
similaire à l'exemple précédent, le fait de renommer le
.glyphicon-search
partiebien évidemment):
Démo 2
Image
Même si personnellement, je préfère avoir l'icône de l'image d'arrière-plan
ici (avoir un coup d'oeil sur cette question et ses réponses), déclarant
l'icône est une image est une autre solution qui fonctionne.
c.f. la réponse de tmg à ce sujet.
Sur le reste
D'aller au-delà avec votre code, vous devez penser au fait que vous travaillez dans un formulaire avec un
input[type="text"]
d'entrée principale.Vous devrez vous soumettre le présent formulaire et, sauf si vous faites affaire avec un cliquez sur l'événement sur cette travée principale de soumettre votre formulaire, vous devrez déclarer votre rechercher durée de un
input
(type=“submit”
).Qui serait sémantiquement plus correcte et plus facile pour vous de traiter avec ce bouton d'action dans l'avenir.
Ma dernière proposition serait alors:
(compte tenu également de la "coutume" span icône de la solution)
-
Démo 3
Sur le responsiveil suffit de déclarer un
min-width
sur votre étiquette:Espérons que cela a du sens. Je suis ouvert à tout type de suggestion, modifier, etc...
Bon chance!
C'est aussi simple que de remplacer span glyphicon numéro de série de votre balise d'image personnalisée forçant la bonne hauteur et la suppression de remplissage haut et bas de texte 'rechercher'.
Ajoutez ceci à votre html:
Ajoutez ceci dans votre css:
Ici vous avez un exemple:
http://www.bootply.com/CAPEgZTt3J
Ici, c'est le css qui va remplacer l'icône de recherche
Vous avez également besoin de redimensionner l'icône de recherche parce que le parent de l'élément a de rembourrage.
Vous pouvez remplacer
.glyphicon
et de définir votre image debackground
pour elle et retirez sonicon
https://jsfiddle.net/ms5e0535/
Vous avez à cacher le défaut glyphicon puis utiliser des images personnalisées.
Essayez ces lignes: