CSS Tutorial

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

سجين القدر
اخر تحديث :

كيفية إستخدام وإضافة الأيقونات (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>

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>
تعديل المقال
الأقسام

مقالات قد تهمك