albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

كيفية إستخدام وإضافة الأيقونات (Icons) فى CSS

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

 

كيفية إضافة وإستخدام الأيقونات – CSS Icons

 

إن أبسط طريقة لإضافة الكود إلى صفحة HTML الخاصة بك هي باستخدام مكتبة أيقونات، مثل:

أو بإستخدام:

 

أضف اسم class للكود المحدد إلى أي عنصر HTML مضمّن داخل وسم <i> أو <span>.

 

جميع الأيقونات الموجودة هي قابلة للتحجيم ويمكن تخصيصها بإستخدام CSS (من حيث الحجم size ، واللون color ، ….إلخ).

 

Font Awesome Icons

 

تحتوى هذه المكتبة على أيقونات vector وشعارات اجتماعية على موقع الويب الخاص بك باستخدام Font Awesome، كما يحتوى على مجموعة الرموز ومجموعة الأدوات الأكثر شيوعًا على الويب.

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

 

مثال للتوضيح:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://kit.fontawesome.com/b124g33.js"></script>
      <style>
        .fa-heart {
          color: #f00;
          font-size: 27px;
        }
          
        .fa-accessible-icon {
          color: #00f;
          font-size: 20px;
        }
          
        .fa-500px {
          color: #00c800;
          font-size: 15px;
        }
      </style>
  </head>
  <body>

    <i class="fas fa-home"></i>
    <i class="fas fa-heart"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fab fa-500px"></i>

  </body>
</html>

 

Google Icons

 

لاستخدام أيقونات 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">
      <style>
        .material-icons {
          color: #f00;
          font-size: 27px;
        }
      </style>
  </head>
  <body>

    <i class="material-icons">face</i>
    <i class="material-icons">access_alarm</i>
    <i class="material-icons">account_circle</i>
    <i class="material-icons">add_alert</i>

  </body>
</html>
Advertisements

 

Bootstrap Icons

 

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" crossorigin="anonymous">

 

مثال للتوضيح:

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
        .glyphicon {
          color: #f00;
          font-size: 27px;
        }
      </style>
  </head>
  <body>

    <i class="glyphicon glyphicon-plus"></i>
    <i class="glyphicon glyphicon-glass"></i>
    <i class="glyphicon glyphicon-heart"></i>
    <i class="glyphicon glyphicon-search"></i>

  </body>
</html>
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements