wake-up-neo.net

Verwenden Sie ein Image anstelle eines Bootstrap-Glyphicons

Ich möchte ein benutzerdefiniertes Bild in einem input-group anstelle eines Bootstrap-Glyphicons ohne Auffüllen von bottom verwenden (mein Bild berührt den unteren Rand der Schaltfläche), wie Sie auf diesem Bild sehen können:  enter image description here


Eigentlich verwende ich Bootstraps 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>

 enter image description here

Mein Problem ist, dass ich Glyphicon nicht durch mein Bild in meiner Suchleiste ersetzen kann.

Ich habe versucht, CSS zu erstellen, um die von Bootstrap nachzuahmen, aber es wird immer schlecht dargestellt:


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>

Beachten Sie, dass mein Bild nicht quadratisch ist (60x37 px).

Hier ist das Bild, das die glyphicon ersetzen sollte:

 enter image description here

Was ist der beste Bootstrap-Weg, um das zu tun? Hier ist ein Bootply meines Codes.

Vielen Dank! :)

14
Mistalis

Sie können anstelle von .input-group-addon einfache img in span.glyphicon verwenden. Mit einigen negativen Rändern erhalten Sie das gewünschte Ergebnis.

HTML

<div class="input-group">
   <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">      
   <span class="input-group-addon">
       <img src="http://i.stack.imgur.com/vr0uy.png">
       <span class="hidden-xs text-upper-style">Rechercher</span>
   </span>      
</div>

CSS

.rechercheProduit .input-group-addon img{
  height: 24px;
  margin-right: -16px;
  margin-bottom: -6px;
  vertical-align:text-bottom; /* align the text */
}

Aktualisierte Bootply

4
tmg

Sie sollten einen Blick darauf werfen, wie das Glyphicon span funktioniert: Wenn Sie es untersuchen, werden Sie feststellen, dass der interessante Teil in dieser span tatsächlich sein pseudo-Element ist, der :before, der eine Schriftart mit Symbolen aufruft ein Inhalt.

 Screenshot of the Glyphicon span behaviour in the DOM


Einige Lösungen sind tatsächlich möglich, um Ihr Problem zu lösen.

Überschreiben

  1. Eine der Lösungen wäre, dieses Pseudo-Element zu überschreiben, indem Seinen Inhalt neu deklariert:

    .rechercheProduit .input-group-addon {
      /* Declaring the parent as relative so the .glyphicon-search child span 
         as a position absolute to its parent.. 
         That probably doesn't make any sense. */
      position: relative;
    }
    .rechercheProduit .glyphicon-search {
      /* 'absolute' in the .input-group-addon context */
      position: absolute; 
      top: auto;
      bottom: 0;
      left: 5px;
      height: 80%;
      width: auto; 
      overflow: hidden;
    }
      .rechercheProduit .glyphicon-search:before {
        content: '';
        display: block;
        width: 50px; /* Generic width */
        height: 100%;
        background: url('http://i.stack.imgur.com/vr0uy.png') no-repeat;
        background-size: auto 100%;
      }
    .rechercheProduit .text-upper-style {
      /* relative to its context. Especially here to deal with the display order. */
      position: relative;
      margin-left: 20px;
    } 
    

    Demo 1


Benutzerdefinierte span

  1. Eine andere Lösung, die wahrscheinlich besser wäre, wäre, Ihre eigene Spanne mit Ihrem eigenen Pseudoelement zu erstellen (CSS ist Ähnlich wie im letzten Beispiel, indem Sie den .glyphicon-search-Teil .__ offensichtlich umbenennen):

    <span class="input-group-addon">
      <span class="search-icon"></span>
      <span class="hidden-xs text-upper-style">
      Rechercher</span>
    </span>
    

    Demo 2


Bild

  1. Selbst wenn ich persönlich lieber das Symbol als Hintergrundbild habe Dort (siehe diese Frage und ihre Antworten ) und deklarieren Das Symbol als Bild ist eine andere Lösung, die funktioniert. 

    c.f. die Antwort von tmg darüber.


Über den Rest

Um über den Code hinauszugehen, sollten Sie darüber nachdenken, dass Sie in einem Formular mit einem input[type="text"] als Haupteingabe arbeiten.

Sie müssen dieses Formular absenden. Sofern Sie sich nicht mit einem click -Ereignis in dieser Hauptspanne befassen, um Ihr Formular abzusenden, müssen Sie Ihren rechercher span als input als angeben gut (type=“submit”). 

Das wäre semantisch korrekter und einfacher für Sie, um mit dieser Schaltfläche in Zukunft fertig zu werden.

Mein abschließender Vorschlag wäre dann:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
  <label class="input-group-addon">
    <span class="search-icon"></span>
    <input type="submit" value="Rechercher" class="hidden-xs text-upper-style" />
  </label>
</div>

-

.text-upper-style {
  background: none;
  text-transform: uppercase;
  border: 0;
  outline: 0;
}
.rechercheProduit .input-group-addon {
  border: 0;
}

Demo 3

Über das responsive geben Sie einfach einen min-width auf Ihrem Etikett an:

.rechercheProduit .input-group-addon {
  min-width: 40px;
  overflow: hidden;
}

Hoffe das macht Sinn. Ich bin offen für Vorschläge, Bearbeitungen usw.

Viel Glück!

4
Alexis B.

Es ist so einfach wie das spanische Glyphicon-Tag für Ihr benutzerdefiniertes Image-Tag zu ersetzen, um die korrekte Höhe zu erzwingen und die obere und untere Auffüllung aus dem Text-Suchfenster zu löschen.

So fügen Sie dies zu Ihrer HTML-Datei hinzu:

  <span class="input-group-addon">
    <img height="25" src="http://i.stack.imgur.com/vr0uy.png" alt="custom-magnifier">
    <span class="hidden-xs text-upper-style">
      Rechercher</span>
  </span>

So fügen Sie dies zu Ihrem CSS hinzu:

.rechercheProduit .input-group-addon {
  padding: 0 12px;
}
.rechercheProduit .input-group-addon {
  vertical-align: bottom;
}

Hier haben Sie ein Beispiel: http://www.bootply.com/CAPEgZTt3J

2
Naui Monclús

Dies ist mein Versuch, ich hoffe, dieser kann Ihnen helfen. Ich benutze absolute. Versuchen Sie einfach, eine vollständige Seite anzuzeigen, und ich arbeite im responsive Design.

* {
    border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}

.text-upper-style {
  text-transform: uppercase;
  padding-left: 20px;
}
.glyphicon-search:before {
    background: url(http://i.stack.imgur.com/vr0uy.png)center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px;
    width: 42px;
    content: '';
    z-index: 99;
    position: absolute;
    top: -15px;
    left: -8px;
}
.glyphicon-search:before{
  content: '' !important;
}
@media screen and (max-width: 767px){
  .cus-icon{
    padding: 0 10px;
  }
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <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 cus-icon"></span>
        <span class="hidden-xs text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

1
mmativ

Hier ist die CSS, die das Suchsymbol ersetzt

.glyphi {
 background: rgba(0, 0, 0, 0) url("http://i.stack.imgur.com/vr0uy.png") no-repeat scroll 0 0 / contain;
 display: inline-block;
 font-style: normal;
 font-weight: 400;
 height: 16px;
 line-height: 1;
 position: relative;
 top: 1px;
 width: 60px;
 }

Sie müssen auch das Suchsymbol ändern, da das übergeordnete Element mit Füllzeichen versehen ist.

1
Sanjeev Kumar

Sie müssen das Standard-Glyphicon ausblenden und dann ein benutzerdefiniertes Bild verwenden. Verwenden Sie diese Zeilen:

.glyphicon-search::before {
    content:none!important;
}
.glyphicon-search {
    background-image:url(../ur-image);
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size:cover;
}
1
hdev

Sie können .glyphicon überschreiben und Ihr Bild als background für es festlegen und dessen icon entfernen. 

.rechercheProduit .input-group-addon span.glyphicon{
    background: url(http://i.stack.imgur.com/vr0uy.png);
    background-size: 100% 100%;
    height: 24px;
    width: 38px;
    vertical-align: text-bottom;
    margin: -6px -13px 0 0;
    top: auto;
    bottom: -6px;
    z-index: 0;
}

.rechercheProduit .input-group-addon span.glyphicon:before{
    content:'';  // To remove its default icon
}

https://jsfiddle.net/ms5e0535/

1
Ahmed Salama

Eine Möglichkeit wäre, ein Hintergrundbild für das Eingabegruppen-Addon + ein paar Auffüll-Links zu verwenden und das Glyphikon vollständig zu entfernen:

* {
  border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
  background-image: url("http://i.stack.imgur.com/vr0uy.png");
  background-position: 6px 3px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 38px;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}
.text-upper-style {
  text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <div class="input-group">
      <input class="form-control" placeholder="Rechercher un produit, une référence ..." type="text">
      <span class="input-group-addon">
        <span class="text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

Sie müssen natürlich die Hintergrundposition, die Hintergrundgröße und die linke Abstandsfläche so ändern, dass sie zu Ihrem Bild passt.

Passen Sie den background-size an, um die Größe des Bildes zu definieren, ändern Sie den background-position, um das Bild innerhalb der span zu positionieren, und ändern Sie den padding-left-Wert, um den Text weiter nach rechts zu verschieben.

1
Quack