Suche einen Sorting-Button bzw. ein Sorting Icon

[JürgenB]

Hallo,

Gunnar hat dich ja schon darauf hingewiesen, das ein a-Element hier nicht geeignet ist.

Im Tabellensortierer im Wiki sieht das (per Javascript erzeugte) HTML und CSS für den Tabellenkopf so aus:

HTML:

<th>
	<span class="visually-hidden">Vorsilbe</span>
	<button type="button" class="sortbutton unsorted" title="Sortiere nach Vorsilbe">
		<span class="visually-hidden">Sortiere aufsteigend nach </span>
		<span class="visually-hidden">Sortiere absteigend nach </span>Vorsilbe
	</button>
</th>

CSS:

.sortbutton { 
	width:100%; 
	height:100%; 
	border: none; 
	background-color: transparent; 
	font: inherit; 
	color: inherit; 
	text-align: inherit; 
	padding: 0; 
	cursor: pointer; 
} 
.sortierbar thead th span.visually-hidden { 
	position: absolute !important; 
	clip: rect(1px, 1px, 1px, 1px) !important; 
	padding: 0 !important; 
	border: 0 !important; 
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden !important; 
	white-space: nowrap !important;
} 
.sortbutton::after { 
	display: inline-block; 
	letter-spacing: -.2em; 
	margin-left:.1em; 
	width: 1.8em;
} 
.sortbutton.sortedasc::after { 
	content: "▲▽" 
} 
.sortbutton.sorteddesc::after { 
	content: "△▼" 
} 
.sortbutton.unsorted::after { 
	content: "△▽" 
} 
.sortbutton.sortedasc > span.visually-hidden:first-of-type { 
	display: none
}
.sortbutton.sorteddesc > span.visually-hidden:last-of-type { 
	display: none 
}
.sortbutton.unsorted > span.visually-hidden:last-of-type { 
	display: none 
}

Die Buttons müssen jetzt nur noch die entsprechende Klasse unsorted, sortedasc oder sorteddesc bekommen.

Gruß
Jürgen