Start Webentwicklung Archiv nach Kategorie "CSS"

Kategorie: CSS

[CSS] Google Material Icons & Symbols verwenden

Icons

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1"/>

		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

		<title>Material Icons</title>
		<style>
			.material-icons { font-size: 32px; color: #1976d2; }
		</style>
	</head>
	<body>
		<div class="app">
			<i class="material-icons">cloud</i>
			
			<button aria-label="Datei öffnen">
				<span class="material-icons" aria-hidden="true">folder_open</span>
			</button>
		</div>
	</body>
</html>

Symbols

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1"/>

		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp">

		<title>Material Symbols</title>
		<style>
			.material-symbols-outlined { font-variation-settings: 'wght' 100, 'FILL' 0; 'GRAD' -50, 'opsz' 48; font-size: 32px; }
			.material-symbols-rounded { font-variation-settings: 'wght' 500, 'FILL' 0.5; 'GRAD' 0, 'opsz' 48; font-size: 48px; }
			.material-symbols-sharp { font-variation-settings: 'wght' 700, 'FILL' 1; 'GRAD' 100, 'opsz' 48; font-size: 54px; }
		</style>
	</head>
	<body>
		<div class="app">
            <span class="material-symbols-outlined">face</span>
			<span class="material-symbols-rounded">face</span>
			<span class="material-symbols-sharp">face</span>
		</div>
	</body>
</html>

Links

[CSS] Icons per Bootstrap 3 und Font Awesome anzeigen

Für die korrekte Darstellung der Icons sollten die passenden Bibliotheksversionen für Bootstrap und Font Awesome eingebunden werden.
Font Awesome 5 benutzt das Prefix „fas“, Font Awesome 4 benutzt das Präfix „fa“.

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
		<title>Font Awesome Test</title>
	</head>
	<body>
		<div class="app">
			<button class="btn btn-danger">
				<i class="fas fa-trash" aria-hidden="true"></i>
				<span class="btn-text"> Löschen</span>
			</button>
			</br>
			<button class="btn">
				<i class="fas fa-download" aria-hidden="true"></i>
				<span class="btn-text"> Download</span>
			</button>
			</br>
			<label class="control-label">
				<i class="fas fa-user" aria-hidden="true"></i>
				<span class="btn-text"> Benutzer</span>
			</label>
		</div>
	</body>
</html>

Links