Sazambi
Neues Mitglied
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:
Doch wie sicherlich den meisten bekannt ist, können innerhalb eines Option-Tags keine weiteren HTML-Tags verwendet werden. Auch folgendes funktioniert nicht:
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:
Vielleicht hat noch irgendjemand eine Idee. Ich würde mich sehr freuen.
Vielen lieben Dank :)
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:
HTML:
<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:
HTML:
<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:
CSS:
@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 :)