بی‌اس.آکادمی
Bs.Academy

فهرست مطلب

سفارش آنلاین پروژه
آنلاین پروژه ات رو سفارش بده !
آیکون ها در CSS

توی این جلسه از دوره آموزش CSS میخوایم به بررسی درج کردن آيکون در وب سایت بپردازیم . مواقعی پیش میاد که ما میخوایم بیایم از آیکون ها توی وب سایتمون استفاده کنیم و بتونیم به اون آیکون ها رنگ های مختلف بدیم و یا بیایم سایزشون رو بزرگ کوچیک کنیم و از کیفیت اون ها چیزی کم نشه ! اینجا میایم از فونت آیکون ها به اصطلاح استفاده میکنیم . 

راحت ترین روش استفاده هم ابتدا باید یک کتابخانه آیکون پیدا کنیم . معروف ترین های این کتابخانه ها Fontawesome – bootstrap – google و خیلی های دیگه هستند. اینجا روش استفاده از چندتا شون رو اشاره میکنیم. 

آیکون های Fontawesome

برای اینکه بتونین از این کتابخانه استفاده کنین باید داخل سایت fontawesome بشین و کد مخصوص این کتابخانه رو دریافت کنین و کد دریافت شده رو داخل تگ head سایتتون قرار بدین و از طریق الگوی مثال زیر از این آیکون ها توی سایتتون استفاده کنین. نکته ای هم که وجود داره هیچی نمیخواد نصب کنین و یا دانلود کنین !

				
					<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body data-rsssl=1>

<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

برای اینکه از کتابخانه فونت آیکون Bootstrap هم توی وب سایتتون استافده کنین کافیه کد زیر رو به قسمت تگ head وب سایتتون اضافه کنین و از مثال زیر الگو بگیرین : 

				
					<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 data-rsssl=1>

<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 سایتتون درج کنین و ازش لذت ببرین : 

				
					<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 data-rsssl=1>

<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>