You have to change the <hr /> to a <span></span> then it should do the work.
<span class="camera"></span>
Solution 1 :
Solution 2 :
Awesome spelling is wrong.
font-family: "Font Awsome 5 Free"; change it to font-family: "Font Awesome 5 Free";
Problem :
I want to add a Font Awesome icon via CSS. I have already linked the stylesheets of the fonts and my style.css.
I don’t understand why when I refresh the page the icon doesn’t appear. Despite stating the font family, font weight and proper Unicode.
hr.camera {
position: relative;
padding: 0;
text-align: center;
border-top: 5px solid #f44336;
max-width: 60%;
margin: 2em auto;
}
hr.camera::after {
content: 'f030';
font-family: "Font Awsome 5 Free";
font-weight: 900;
}<div class="row">
<div class="col-lg-12">
<h2>My Icon</h2>
<hr class="camera">
</div>
</div>Comments
Comment posted by Paulie_D
Have you loaded the actual font anywhere?
Comment posted by browser console (dev tools)
“I have already linked the stylesheets of the fonts and my style.css.”
Comment posted by Giosue Congiu
@slow Thank you so much, I added a and finally I can see the icon.
Comment posted by slow
@GiosueCongiu nice! Added an answer.
Comment posted by Giosue Congiu
Hi, thanks for it but it doesn’t solve my problem.
Comment posted by Community
Please add further details to expand on your answer, such as working code or documentation citations.