الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> p::before { text-rendering: auto; -webkit-font-smoothing: antialiased; font: var(--fa-font-solid); content: "\f5bc"; display: inline-block; vertical-align: middle; margin-right: 5px; font-size: 14px; color: crimson; } </style> </head> <body> <h1>Insert a fontawesome icon before the content</h1> <p>We use the before selector to insert an icon from fontawesome before the content.</p> <p>First three properties are very important in order to render fontawesome 6 icons.</p> <p>The '\f5bc' is the CSS code of the icon.</p> </body> </html>