1. Einführung in CSS Framework

Font Awesome ist eine hervorragende Symbol-Schriftbibliothek und ein CSS-Framework, das Ihnen skalierbare Vektorsymbole bietet. Sie können alle von CSS bereitgestellten Funktionen verwenden, um sie zu ändern, einschließlich: Größe, Farbe, Schatten oder andere unterstützende Effekte. Nur eine Font Awesome-Schriftbibliothek enthält fast Bildsymbole, die sich auf Webseiten beziehen. Font Awesome ist überhaupt nicht auf JavaScript angewiesen, sodass Sie sich keine Sorgen um die Kompatibilität machen müssen.

Framework-Gründer: Dave Gandy (Dave Gandy)

Chinesische Website: https://fontawesome.dashgame.com/

2. Wie man es benutzt

(1) Laden Sie das CSS-Framework herunter

Laden Sie das CSS-Framework von der oben genannten Website herunter und fügen Sie es dem Projekt hinzu.

(2) Stilreferenz

Zitieren Sie Stile in HTML-Seiten. folgendermaßen:

<!--FontAwesome图标字体样式库-->
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">

(3) Symbol hinzufügen

Verwenden Sie Schriftart-Symbole auf der Seite. folgendermaßen:

<i class="fa fa-shopping-cart"></i> 我的购物车

[Beispiel] Verwenden Sie die FontAwesome-Symbolschriftartenbibliothek, um relevante Bilder zu generieren, die für Webseiten erforderlich sind.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FontAwesome图标字体库</title>
    <meta name="author" content="pan_junbiao的博客">

    <!--FontAwesome图标字体样式库-->
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}
    </style>
</head>
<body>
    <table align="center">
        <tr>
            <th>CSS框架：</th>
            <td>FontAwesome图标字体库</td>
        </tr>
        <tr>
            <th>框架创始人：</th>
            <td>戴夫·甘迪（Dave Gandy）</td>
        </tr>
        <tr>
            <th>字体图标：</th>
            <td>
                <i class="fa fa-shopping-cart"></i> fa-shopping-cart<br/>
                <i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up<br/>
                <i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down<br/>
                <i class="fa fa-bell-o"></i> fa-bell-o<br/>
                <i class="fa fa-commenting-o"></i> fa-commenting-o<br/>
                <i class="fa fa-folder-open"></i> fa-folder-open<br/>
                <i class="fa fa-gamepad"></i> fa-gamepad<br/>
                <i class="fa fa-id-card-o"></i> fa-id-card-o<br/>
            </td>
        </tr>
        <tr>
            <th>博客信息：</th>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
        </tr>
        <tr>
            <th>博客地址：</th>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
    </table>
</body>
</html>

Ergebnisse der:

FontAwesome Icon Font Library und CSS Framework

1. Einführung in CSS Framework

2. Wie man es benutzt

Ich denke du magst