دورة css للمبتدئين الدرس الخامس


فهاد الدرس الخامس من دورة ال css غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدوا les icons كاين بزاف ديال les bibliothèques منهم bootstrap وfontawesome وgoogle materialize  لي كيمكنوا باش نزيدو les icons ل les projets ديالنا فغادي نشوفوهم كاملين.


1- إضافة fontawesome icons

فباش نزيد les icons لل document html ديالي عندي fontawesome لي كتوفر مجموعة متنوعة من les icons يمكنلك تشوفهم فالموقع ديالهم من هنا فكاين بزاف ديال الطرق باش نزيدهم لكن اسهل طريقة ولي كتطلب انك تكون كتوفر على la connexion هي تدير include لل fichier cdn فكيف كتشوف فالكود المرفق زدنا الملف :
فبهاد الطريقة كنزيد les icons وباش نستعملهم عندي la tag i لي كتاخد la classe fa  لي كنعطيها ايضا اسم ل icon فل code مثلا 
عندنا ل fa-user ول fa-calendar ول fa-book يمكنلك تشوف d'autres icons فالموقع ديالهم الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Darija Coding</h3>
    <i class="fa fa-user"></i>
    <i class="fa fa-phone"></i>
    <i class="fa fa-user-plus"></i>
    <i class="fa fa-book"></i>
    <i class="fa fa-calendar"></i>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                            

2- إضافة fontawesome icons باستعمال css

فكيف شفنا يمكن نزيدو ل icons باستعمال cdn ويمكن ايضا نزيدوهم باستعمال css فقط كاناخد لكود ديال ل icone لي كاين ايضا فالموقع فملي كتكلكي على شي icone كتلقى ايضا ل unicode لي يمكنلك تديرلو copier ففالكود لي زدنا عندنا span وفالملف style.css كناخد span وكنخدم ب after لي كتمكن من إضافة اي حاجة داخل اي tag فهنا زدنا ل content لي عطيناه لكود ديال ل icone ولي هي adress book ومتنساش تزيد ل font-family لي كنعطيه FontAwesome والا مغاديش تخدملك الكود ديال الملف هو : 

                                //index.html code

<span></span>

//style.css code

span:after{
	font-family: 'FontAwesome';
	content: '\f2b9';
}
                            

3- إضافة bootstrap icons

فباش نزيد  bootstrap icons لل document html ديالي عندي ايضا bootstrap لي كتوفر مجموعة متنوعة من les icons يمكنلك تشوفهم فالموقع ديالهم من هنا فكنزيدهم بنفس الطريقة كيف شفنا مع fontawesome كنزيد cdn لي هي   https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
فبهاد الطريقة كنزيد les icons وباش نستعملهم عندي la tag i لي كتاخد la classe glyphicon لي كنعطيها ايضا اسم ل icon فنفس الطريقة لي شفنا قبل  يمكنلك تشوف d'autres icons فالموقع ديالهم الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Darija Coding</h3>
    <i class="glyphicon glyphicon-book"></i>
    <i class="glyphicon glyphicon-phone"></i>
    <i class="glyphicon glyphicon-camera"></i>
    <i class="glyphicon glyphicon-envelope"></i>
    <i class="glyphicon glyphicon-thumbs-up"></i>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                            

4- إضافة google icons

فباش نزيد google icons لل document html كنزيدهم بنفس الطريقة كيف شفنا مع bootstrap كنزيد cdn لي هي  https://fonts.googleapis.com/icon?family=Material+Icons
الفرق هنا هو هو عندي tag i لي كتاخد la classe material-icons وفوسطها كنعطي اسم ل icone يمكنلك تشوف المزيد فالموقع ديالهم من هنا  الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Darija Coding</h3>
        <i class="material-icons">book</i>
        <i class="material-icons">help</i>
        <i class="material-icons">face</i>
        <i class="material-icons">functions</i>
        <i class="material-icons">phone</i>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>