الايقونات في CSS icons | ستايلات CSS


تعد الرموز جزءًا لا يتجزأ من مواقع الويب اليوم، ومن النادر العثور على موقع لا يستخدم الرموز. في هذا الدرس سوف ننظر في كيفية استخدام الرموز.



الايقونات في CSS icons | ستايلات CSS


كيفية إضافة الرموز إلى صفحة الويب

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

ثم أضف اسم فئة الرمز إلى كل عنصر مضمّن في HTML (مثل <i> أو <span>)

جميع الرموز في Font Awesome Icon Library عبارة عن متجهات قابلة للتطوير يمكن تخصيصها باستخدام CSS (الحجم واللون والظل وما إلى ذلك).


مكتبة ايقونات Font Awesome icons 

لاستخدام أيقونات مكتبة Font Awesome، أضف السطر التالي إلى قسم <head> في صفحة HTML الخاصة بك:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

لاحظ أن إضافة الكود أعلاه لا يتطلب أي تنزيل أو تثبيت. تسمى هذه الطريقة إضافة cdn وتستخدم مكتبة موجودة على خادم خارجي. أنت غير مقيد بهذه الطريقة ويمكنك تنزيل مكتبة Font Awesome من موقعها الرسمي وإضافتها إلى مشروعك مثل المكتبات الأخرى.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

أيقونات Bootstrap

لاستخدام أيقونات Bootstrap، أضف السطر التالي إلى قسم <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>

أيقونات جوجل

لاستخدام رموز 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>

 

كلمات مفتاحية: