Einführung und Anwendung von Font Awesome Icons

1. Einleitung

Font Awesome ist eine Reihe von Symbolschriftartenbibliotheken und CSS-Frameworks. Der Hauptzweck besteht in der Verwendung mit Bootstrap. Sie können Größe, Farbe, Schatten usw. über die von CSS bereitgestellten Funktionen festlegen

Symbolbibliothek: http://www.fontawesome.com.cn/faicons/

Offizielle Website: https://fontawesome.com/?from=io

Eine weitere häufig verwendete Symbolbibliothek ist die Ali-Vektorsymbolbibliothek https://www.iconfont.cn/

2. Zitat

Fügen Sie den folgenden Code in den HTML-Codeabschnitt der Webseite ein.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Kopieren Sie den gesamten Ordner „font-awesome“ in das Projekt, referenziert durch den relativen Pfad

3. Anwendung

Verweisen Sie zunächst auf die Symbolbibliothek in
Öffnen Sie die Seite der Icon-Bibliothek: http://www.fontawesome.com.cn/faicons/

$[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-wk0EaFru-1650113347380) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ image-20220416203852645.png)]$

Suchen Sie das entsprechende Symbol und klicken Sie zur Eingabe. Es gibt zwei Optionen: Symbolnamen kopieren und Quellcode kopieren. Sie können den Quellcode direkt kopieren und das Symbol an einer beliebigen Position platzieren

$[Bildübertragung mit externem Link fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-0oU9gT8U-1650113347381) (C:\Users\lenovo\AppData\Roaming\Typora\ typora-user-images\ image-20220416203952815.png)]$

Symboleigenschaften festlegen: http://www.fontawesome.com.cn/examples/

$[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-s3ezGAm9-1650113347382) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ image-20220416204811567.png)]$

4. Fall

<div class="icon-bar">
        <a href="#" class="active"><i class="fa fa-home"></i></a>
        <a href="#"><i class="fa fa-search"></i></a>
        <a href="#"><i class="fa fa-envelope"></i></a>
        <a href="#"><i class="fa fa-globe"></i></a>
        <a href="#"><i class="fa fa-trash"></i></a>
    </div>

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    /*引用*/
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .icon-bar{
    
    
            width: 100%;
            background-color: #ddd;
            overflow: auto;
        }
     /*设置图标的样式*/
        a{
    
    
            width: 20%;
            float: left;
            text-align: center;
            color: white;
            font-size: 36px;
            padding: 12px 0;
        }
        a:hover{
    
    
            background-color: #ccc;
        }
        .active{
    
    
            background-color: thistle !important;
        }
    </style>
</head>

Operationsergebnis:
Fügen Sie hier eine Bildbeschreibung ein