Was sie zum Umgang mit Webfont-Icons von Font Awesome wissen sollten


Sie können Font Awesome-Symbole überall platzieren, indem Sie ein Stilpräfix (fas, far, fab) und den Namen des Symbols (fa-name) verwenden. Wir haben versucht, es so zu machen, dass Icons die Eigenschaften annehmen und neben dem Text natürlich erscheinen.

Font Awesome ist für die Verwendung mit Inline-Elementen konzipiert, und wir empfehlen, mit einem konsistenten HTML-Element zu arbeiten, um sie in Ihrem Projekt zu referenzieren. Wir mögen den <i>-Tag aus Gründen der Kürze und der Tatsache, dass die meisten Leute heutzutage <em> </em> für hervorgehobenen / kursiven semantischen Text verwenden.. Wenn das nicht Ihre Sache ist, ist die Verwendung von <span> semantisch korrekter.
Font Awesome

Verfügbare Style Präfixe in Fontawesome 5.2. free

Style Verfügbarkeit Style Präfix Beispielcode gerendert
Solid Free fas <i class="fas fa-grin"></i>
Regular Free far <i class="far fa-grin"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>

Beispiele für Verfügbare Style Präfixe

Style Präfix fas = solid

Style Präfix fas

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Style Präfix fas = solid </title>
<!-- hier die CSS Datei für Fontawesome Webfont- Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
<style>
<!--
body {
	font-size: 10em;
	text-align: center;
	margin-top: 5%;
}
-->
</style>
</head>
<body>
<i class="fas fa-grin"></i>
</body>
</html>
Style Präfix far = Regular

Style Präfix far

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Style Präfix far = Regular </title>
<!-- hier die CSS Datei für Fontawesome Webfont- Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
<style>
<!--
body {
	font-size: 10em;
	text-align: center;
	margin-top: 5%;
}
-->
</style>
</head>
<body>
<i class="far fa-grin"></i>
</body>
</html>
Style Präfix fab = Brands (Marken)

Style Präfix fab

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Style Präfix fab = Brands (Marken)</title>
<!-- hier die CSS Datei für Fontawesome Webfont- Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
<style>
<!--
body {
	font-size: 10em;
	text-align: center;
	margin-top: 5%;
}
-->
</style>
</head>
<body>
<i class="fab fa-font-awesome"></i>
</body>
</html>