يمكنك بسهولة إضافة أيقونات إلى صفحة HTML الخاصة بك باستخدام مكتبة أيقونات.
كيفية إضافة الأيقونات
أبسط طريقة لإضافة أيقونة إلى صفحة HTML الخاصة بك هي استخدام مكتبة أيقونات مثل Font Awesome. أضف اسم فئة الرمز المحدد إلى أي عنصر HTML مضمن (مثل <i> أو <span>).
جميع الأيقونات في مكتبات الرموز أدناه هي متجهات قابلة للتطوير ويمكن تخصيصها باستخدام CSS (الحجم واللون والظل وما إلى ذلك).
أيقونات Font Awesome
لاستخدام أيقونات Font Awesome، انتقل إلى fontawesome.com، وقم بتسجيل الدخول، واحصل على رمز لإضافته إلى قسم <head> في صفحة HTML الخاصة بك:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
لاستخدام أيقونات Bootstrap glyphicons، أضف السطر التالي داخل قسم <head> في صفحة HTML الخاصة بك:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
ملاحظة: لا يلزم التنزيل أو التثبيت!tunesharemore_vert
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
لاستخدام أيقونات Google، أضف السطر التالي داخل قسم <head> في صفحة HTML الخاصة بك:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
ملاحظة: لا يلزم التنزيل أو التثبيت!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
