[GELOEST] Icons (Boxicons) in option-Feld

[Sazambi]

Hallo,
ich stehe vor einem großen Rätsel und komme einfach nicht weiter, auch nachdem ich bereits 2 Tage lange gegoogelt habe. Ich entwickle zur Zeit ein Backend-Interface und nutze für die Oberfläche Bootstrap 5 mit dem kostenlosen Sneat-Theme. Hier werden Boxicons verwendet, welche ich auch fleißig nutze. Ich bin aktuell dabei, die Menüverwaltung zu entwickeln, bei der auch die Icons für den jeweiligen Menüpunkt ausgewählt werden können soll. Ich schaffe es jedoch nicht in die Option-Felder der Icon-Auswahl das jeweilige Icon vor den Icon-Namen zu setzen. Normalerweise binde ich diese immer wie folgt ein:

<i class="bx bx-icon-name"></i>

Doch wie sicherlich den meisten bekannt ist, können innerhalb eines Option-Tags keine weiteren HTML-Tags verwendet werden. Auch folgendes funktioniert nicht:

<option class="bx bx-icon-name">icon-name</option>

Ich habe auch bereits mit den Attributen data-icon rumexperimentiert - ohne erfolg.

Jetzt muss ich dazu sagen, dass ich mit CSS nicht so wahnsinnig versiert bin, vielleicht passen meine Einstellungen auf Seite des CSS nicht.

Hier exemplarisch der CSS-Code:

@font-face
{
    font-family: 'boxicons';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/boxicons.eot');
    src: url('../fonts/boxicons.eot') format('embedded-opentype'),
    url('../fonts/boxicons.woff2') format('woff2'),
    url('../fonts/boxicons.woff') format('woff'),
    url('../fonts/boxicons.ttf') format('truetype'),
    url('../fonts/boxicons.svg?#boxicons') format('svg');
}
.bx
{
    font-family: "boxicons" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;

    text-transform: none;

    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bx-candles:before {
    content: "\ef11";
  }

Vielleicht hat noch irgendjemand eine Idee. Ich würde mich sehr freuen.

Vielen lieben Dank :)

 

[Aaron3219]

So etwas ist leider nicht möglich. Es gibt ein paar komische Workarounds, die aber auch nur so halb bis gar nicht funktionieren (zumindest nicht auf allen Geräten).

Der option tag ist sehr limitiert in seinen Möglichkeiten. Gleiches gilt für den select tag. Der Trend ist dazu übergegangen ein select-dropdown selber zu implementieren. Damit stehen dir dann alle Möglichkeiten offen.

Beispiel

 

[Sazambi]

Ich habe tatsächlich eine Lösung gefunden. Man kann tatsächlich den Unicode des Icons verwenden. In dem Fall von "bx-candles" wäre das 

Folgendes führt also zum Erfolg:

<option class="bx">&#xef11;</option>

 

[Aaron3219]

Ich habe tatsächlich eine Lösung gefunden. Man kann tatsächlich den Unicode des Icons verwenden. In dem Fall von "bx-candles" wäre das 

Folgendes führt also zum Erfolg:

<option class="bx">&#xef11;</option>

Genau, das ist ein möglicher Workaround. Leider funktioniert er nicht auf mobilen Endgeräten, wie iPhones.

Wenn dir das reicht, feel free, ansonsten bleibt mein ursprünglicher Punkt bestehen.

 

[Sazambi]

Das reicht mir in dem Fall tatsächlich, da es um die Auswahl von weit über 100 Optionen geht. Die meisten selbstgebauten Alternativen wären dafür aufgrund der Größe der Auswahl einfach ungeeignet, da man z.b. einen extra Scrollbalken benötigt. Dass die Icons dafür nicht auf dem Handy anzeigt werden, kann ich verkraften.

 

[SpiceLab]

Das reicht mir in dem Fall tatsächlich, da es um die Auswahl von weit über 100 Optionen geht. Die meisten selbstgebauten Alternativen wären dafür aufgrund der Größe der Auswahl einfach ungeeignet, da man z.b. einen extra Scrollbalken benötigt. Dass die Icons dafür nicht auf dem Handy anzeigt werden, kann ich verkraften.

Na dann...

"Theme Closed"