Introduction and Application of Font Awesome Icons

1 Introduction

Font Awesome is a set of icon font library and CSS framework, the main purpose is to use with Bootstrap, you can set the size, color, shadow, etc. through the features provided by CSS

Icon library: http://www.fontawesome.com.cn/faicons/

Official website: https://fontawesome.com/?from=io

Another commonly used icon library is Ali vector icon library https://www.iconfont.cn/

2. Quote

Paste the following code into the HTML code section of the web page.

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

Copy the entire font-awesome folder to the project, referenced by relative path

3. How to use

First reference the icon library in
Open the page of the icon library: http://www.fontawesome.com.cn/faicons/

$[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-wk0EaFru-1650113347380) (C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\ image-20220416203852645.png)]$

Find the corresponding icon and click to enter. There are two options: copy icon name and copy source code. You can directly copy the source code and place the icon in any position

$[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-0oU9gT8U-1650113347381) (C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\ image-20220416203952815.png)]$

Set icon properties: http://www.fontawesome.com.cn/examples/

$[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-s3ezGAm9-1650113347382) (C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\ image-20220416204811567.png)]$

4. Case

<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>

operation result:
insert image description here