التعريف Font Awesome هي أداة خط وأيقونات تعتمد على CSS و Less و Sass. تتمتع Font Awesome بحصة تسويقية تبلغ 20٪ بين المواقع التي تستخدم برامج نصية للخطوط من جهات خارجية على نظامها الأساسي ، مما يضعها في المرتبة الثانية بعد Google Fonts2. الأداة سهلة الإستعمال و لا تستحق الكثير من الشرح. كود HTML: <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/all.min.css" rel="stylesheet"> <link href="css/sharp-solid.min.css" rel="stylesheet"> </head> <body> <div style="width:600px;margin:10px auto;padding:7px;border:1px solid #000"> <h1>Classic</h1> <h3>Solid</h3> <p> <i class="fa-solid fa-envelope" style="color:orange;"></i> <i class="fa-solid fa-envelopes" style="color:orange;"></i> <i class="fa-solid fa-circle-half-stroke"></i> <i class="fa-solid fa-eye-slash"></i> <i class="fa-solid fa-folder" style="color:purple;"></i> <i class="fa-solid fa-folder-open" style="color:purple;"></i> <i class="fa-solid fa-check" style="color:green;"></i> <i class="fa-solid fa-circle-xmark" style="color:red;"></i> <i class="fa-solid fa-circle-user" style="color:green;"></i> <i class="fa-solid fa-image" style="color:blue;"></i> </p> <h3>Regular</h3> <p> <i class="fa-regular fa-envelope" style="color:orange;"></i> <i class="fa-regular fa-envelopes" style="color:orange;"></i> <i class="fa-regular fa-circle-half-stroke"></i> <i class="fa-regular fa-eye-slash"></i> <i class="fa-regular fa-folder" style="color:purple;"></i> <i class="fa-regular fa-folder-open" style="color:purple;"></i> <i class="fa-regular fa-check" style="color:green;"></i> <i class="fa-regular fa-circle-xmark" style="color:red;"></i> <i class="fa-regular fa-circle-user" style="color:green;"></i> <i class="fa-regular fa-image" style="color:blue;"></i> </p> <h3>Thin</h3> <p> <i class="fa-thin fa-envelope" style="color:orange;"></i> <i class="fa-thin fa-envelopes" style="color:orange;"></i> <i class="fa-thin fa-circle-half-stroke"></i> <i class="fa-thin fa-eye-slash"></i> <i class="fa-thin fa-folder" style="color:purple;"></i> <i class="fa-thin fa-folder-open" style="color:purple;"></i> <i class="fa-thin fa-check" style="color:green;"></i> <i class="fa-thin fa-circle-xmark" style="color:red;"></i> <i class="fa-thin fa-circle-user" style="color:green;"></i> <i class="fa-thin fa-image" style="color:blue;"></i> </p> <h3>Brands</h3> <p> <i class="fa-solid fa-envelope" style="color:orange;"></i> <i class="fa-solid fa-envelopes" style="color:orange;"></i> <i class="fa-brands fa-twitter" style="color:#1DA1F2;"></i> <i class="fa-brands fa-facebook-f" style="color:#1877f2;"></i> <i class="fa-brands fa-linkedin-in" style="color:#0a66c2;"></i> <i class="fa-brands fa-google-plus" style="color:#ea4335;"></i> <i class="fa-brands fa-github" style="color:#333333;"></i> <i class="fa-brands fa-square-gitlab" style="background:linear-gradient(-120deg,#fca326,#fc6d26,#e24329,#554488);"></i> <i class="fa-brands fa-pinterest-p" style="color:#bd081c;"></i> <i class="fa-brands fa-blogger-b" style="color:#fc4f08;"></i> <i class="fa-brands fa-php" style="color:#777bb3;"></i> <i class="fa-brands fa-readme" style="color:grey;"></i> </p> <h3>Duotone</h3> <p> <i class="fa-duotone fa-envelope" style="color:orange;"></i> <i class="fa-duotone fa-envelopes" style="color:orange;"></i> <i class="fa-duotone fa-circle-half-stroke"></i> <i class="fa-duotone fa-eye-slash"></i> <i class="fa-duotone fa-folder" style="color:purple;"></i> <i class="fa-duotone fa-folder-open" style="color:purple;"></i> <i class="fa-duotone fa-check" style="color:green;"></i> <i class="fa-duotone fa-circle-xmark" style="color:red;"></i> <i class="fa-duotone fa-circle-user" style="color:green;"></i> <i class="fa-duotone fa-image" style="color:blue;"></i> </p> <hr> <h1>Sharp</h1> <p> <i class="fa-sharp fa-solid fa-envelope" style="color:orange;"></i> <i class="fa-sharp fa-solid fa-envelopes" style="color:orange;"></i> <i class="fa-sharp fa-solid fa-circle-half-stroke"></i> <i class="fa-sharp fa-solid fa-eye-slash"></i> <i class="fa-sharp fa-solid fa-folder" style="color:purple;"></i> <i class="fa-sharp fa-solid fa-folder-open" style="color:purple;"></i> <i class="fa-sharp fa-solid fa-check" style="color:green;"></i> <i class="fa-brands fa-twitter" style="color:#1DA1F2;"></i> <i class="fa-brands fa-readme" style="color:grey;"></i> <i class="fa-sharp fa-solid fa-circle-xmark" style="color:red;"></i> <i class="fa-sharp fa-solid fa-circle-user" style="color:green;"></i> <i class="fa-sharp fa-solid fa-image" style="color:blue;"></i> </p> </div> </body> </html> أنظر المرفقات لمزيد الإطلاع أدخل على كود: https://ar.wikipedia.org/wiki/%D9%81%D9%88%D9%86 %D8%AA_%D8%A3%D9%88%D8%B3%D9%88%D9%85
