CODEWITHSUNDEEP
htmlcss
testproftest 23
testproftest 23

Reputation: 35

displaying icon in an input file

hello i want to display this icon in the input file as shown in the picture and in front of it i will add file : as label enter image description here

this is the html code :

<div class="custom-file">
    <p> file :</p>
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    
    <label class="custom-file-label" for="validatedCustomFile"></label>

</div>

and the css :

.custom-file-input ~ .custom-file-label::after {
    content: "fas fa-paperclip";
    
}

Upvotes: 0

Views: 786

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

you have to use unicode with pseudo class to have the icon displayed

for sample for fa-paperclip the unicode is f0c6

.custom-file-input ~ .custom-file-label::after {
    content: "\f0c6";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="custom-file">
    <p> file :</p>
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    
    <label class="custom-file-label" for="validatedCustomFile"></label>

</div>

Upvotes: 3

Related Questions