I'm trying to use font awesome icon in css pseudo element but it's not working what is wro-CodePudding

 <style>
      h1::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5fc";
    }
</style>
</head>

<body>
    <h1>Heading</h1>
</body>

</html>

is there anything wrong in this code ?? I have changed font weight several times but it keeps on showing that hollow box

CodePudding user response：

I resolved the issue by importing the Font Awesome CDN link in your <head>. These ones oddly don't work.

<head>
<!-- Doesn't work -->
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>

Using the Font Awesome Webfont with CDN solves the issue.

Check the snippet.

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<style>
    h1::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5fc";
    }
</style>
</head>

<body>
    <h1>Heading</h1>
</body>

</html>

CodePudding user response：

h1 {
    position: relative;
    padding-left: 35px;
}

h1::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f5fc";
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: 10px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<h1>Heading</h1>