Wie füge ich in Bootstrap ein Symbol zu einer Sucheingabe hinzu?

Sucheingabe mit einem Symbol mithilfe von Bootstrap

In Bootstrap 4 können Sie Glyphicons nicht mehr für Symbole verwenden. Stattdessen können Sie entweder das Symbol als Hintergrund festlegen oder ein Font Awesome-Symbol mit benutzerdefinierter Positionierung verwenden.

Hintergrundbild:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

Diese Methode jedoch Funktioniert möglicherweise nicht immer zuverlässig.

Font Awesome Icon mit Custom Positionierung:

.input-group {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

Bootstrap 5:

In Bootstrap 5 können Sie die Eingabegruppenkomponente verwenden, um einfach ein Symbol zu einer Sucheingabe hinzuzufügen .

<div>

Alternative Ansätze:

• Eingabegruppe mit Border-Utils:Verwenden Sie die Border-Klassen, um einen Rahmen um die Eingabe und das Symbol zu erstellen.

<div>

• Eingabegruppe mit Text:

<div>

Das obige ist der detaillierte Inhalt vonWie füge ich in Bootstrap ein Symbol zu einer Sucheingabe hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!