fontaswesom彻底搞懂在css伪元素上怎么使用_伪元素如何使用fontawesome-CSDN博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <style>
        .icon {

            display: inline-block;

            font-style: normal;

            font-variant: normal;

            text-rendering: auto;

            -webkit-font-smoothing: antialiased;

            font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

        }



        .icon1:before {

            content: "\f099";

            /* TWITTER ICON */

            font-weight: 400;

        }



        .icon2:before {

            content: "\f095";

            /* PHONE ICON */

            font-weight: 900;

        }



        .icon3:before {

            content: "\f095";
            /* PHONE ICON */

            font-weight: 900;
            /*This one will not work because the regular version of the phone icon is in the Pro Package*/

        }

        .icon4:before {

            content: "\f26e";
            /* PHONE ICON */
            font-weight: 900;
            /*This one will not work because the regular version of the phone icon is in the Pro Package*/

        }
    </style>
</head>

<body>

    <div class="icon1 icon"></div>

    <div class="icon2 icon"></div>
    <div class="icon3 icon"></div>
    <div class="icon4 icon"></div>
</body>

</html>