أيقونات W3.CSS
مكتبات الأيقونات
باستخدام W3.CSS ، يمكنك استخدام مكتبة الرموز التي تعجبك ، مثل:
- أيقونات رهيبة للخط
- أيقونات تصميم المواد من Google
- أيقونات Bootstrap
استخدام مكتبة الأيقونات
لإدراج رمز:
- قم بتضمين مكتبة الرموز من CDN (شبكة توصيل المحتوى) في قسم <head>.
- أضف اسم فئة الرمز إلى أي عنصر HTML مضمّن.
نصيحة: تُستخدم العناصر <i> و <span> على نطاق واسع لإضافة الرموز.
للتحكم في حجم الرمز ، قم بتغيير خاصية حجم الخط للرمز ، أو استخدم إحدى فئات w3- size :
- w3- صغير
- w3- صغير
- W3- كبير
- w3-xxlarge
- w3-xxxlarge
- w3- جامبو
بعض أيقونات رهيبة الخط
fa fa-home
FA- الحانات
fa fa- السهم الأيسر
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-Refresh
fa fa-trash
يؤلم
fa fa-car
fa fa-truck
كرة القدم الطائرة
مثال
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
للحصول على قائمة كاملة بالأيقونات: قم بزيارة مرجع الرمز الخاص بنا
بعض أيقونات تصميم المواد من Google
الصفحة الرئيسية
الصفحة الرئيسية
الصفحة الرئيسية
قائمة
قائمة
قائمة
سهم
سهم
سهم
arrow_forward
arrow_forward
arrow_forward
بحث
بحث
بحث
أغلق
أغلق
أغلق
تحديث
تحديث
تحديث
حذف
حذف
حذف
شخص
شخص
شخص
الاتجاهات_السيارة
الاتجاهات_السيارة
الاتجاهات_السيارة
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
مثال
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
بعض أيقونات Bootstrap
الصفحة الرئيسية
قائمة همبرغر
سهم
arrow_forward
بحث
إزالة
تحديث
قمامة، يدمر، يهدم
المستعمل
ملف
مطبعة
طائرة
مثال
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>