آیکون CSS

چگونه آیکون اضافه کنیم

ساده‌ترین روش برای اضافه کردن آیکون به صفحه 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 5 ما، برای اطلاعات بیشتری در مورد چگونگی شروع به استفاده از Font Awesome بخوانید.

توجه:لا نیاز به دانلود یا نصب!

مثال

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

نتیجه:

آزمایش کنید

آیکون‌های Google

برای استفاده از آیکون‌های 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">
</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>

نتیجه:

آزمایش کنید