Solution 1 :

label:after {
content: "f030";
font-family: "Line Awesome Free";
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
  }

this code is correct but you also have to add font-weight: 900;

Solution 2 :

In your head html file insert this :

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

your css:

label:after {
content: "f030";
font-family: "Line Awesome Free";
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
  }

your html:

<form action="#">
                    <div class="text-center">
                        <div class="avatar-upload">
                            <div class="avatar-edit">
                                 <input name="input_file" type="file" id="profile-pic-upload" />
                                <label for="profile-pic-upload"></label>
                            </div>
                        </div>
                    </div>
                </form>

It would be better to use directly:

<i class="las la-address-book"></i>

Problem :

I created a class

.image-upload .image-edit input + label:after {
    content: "f030";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

I need to change the camera Icon (font awesome to line awesome )

I have tried

.image-upload .image-edit input + label:after {
    content: "&#xf368";
    font-family: '"Line Awesome Free"';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

But its not working

This is the HTML form

                    <form action=""#>
                        <div class="text-center">
                            <div class="avatar-upload">
                                <div class="avatar-edit">
                                     <input name="input_file" type="file" id="profile-pic-upload" />
                                    <label for="profile-pic-upload"></label>
                                </div>
                            </div>
                        </div>
                    </form>

Comments

Comment posted by ht13

Please you can add HTML code.

Comment posted by Anoop

I just updated the codes

Comment posted by Anoop

Hi Its working But I am unable to call a perticular icon

Comment posted by Anoop

I need the perticular icon la-cameraClick to copy Class [] I just called it as content: “f030”;

By