سی ایس ایس آئیکون

آئیکن کا اضافہ کیسے کریں؟

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

إذا كنت ترغب في استخدام أيقونات glyphicons الخاصة بـ 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>

نتائج:

خود کا تجربہ کریں

أيقونات جوجل

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

نتائج:

خود کا تجربہ کریں