إيقونات CSS

كيفية إضافة أيقونة

أسهل طريقة لتحديد أيقونة في صفحة HTML هي استخدام مكتبة الأيقونات، مثل Font Awesome.

أضف اسم فئة أيقونة محددة إلى أي عنصر HTML داخلي (مثل <i> أو <span>).

جميع الأيقونات في مكتبة الأيقونات أدناه هي فيكتور قابلة للتحجيم، يمكن تخصيصها باستخدام CSS (الحجم والألوان والظلال وما إلى ذلك).

Font Awesome أيقونة

إذا كنت ترغب في استخدام أيقونات Font Awesome، اذهب إلى fontawesome.com، وقم بال تسجيل الدخول للحصول على الرمز وأضفه إلى جزء <head> من صفحة HTML الخاصة بك:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

اقرأ المزيد عن كيفية البدء في استخدام Font Awesome في دليلنا لتعلم Font Awesome 5.

تلميح:لا تحتاج إلى التحميل أو التثبيت!

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></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

إذا كنت ترغب في استخدام أيقونات Bootstrap glyphicons، فأضف سطرًا كما يلي في جزء <head> من صفحة HTML الخاصة بك:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

تلميح:لا تحتاج إلى التحميل أو التثبيت!

مثال

<!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>

النتيجة:

جرب بنفسك

أيقونات جوجل

إذا كنت ترغب في استخدام أيقونات جوجل، فأضف سطرًا كما يلي في جزء <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>

النتيجة:

جرب بنفسك