آموزش اضافه کردن آیکون(Icon) در CSS
با استفاده از یک کتابخانه ی آیکون(icon library)، به سادگی می توانیم در صفحه ی HTML خود، آیکون اضافه کنیم.
چگونه آیکون ها را به صفحه HTML اضافه کنیم؟
ساده ترین راه برای اضافه کردن یک آیکون به صفحه ی HTML خود، این است که از یک کتابخانه ی آیکون(icon library) مانند کتابخانه ی Font Awesome استفاده کنیم. سپس باید نام (کلاس) یک آیکون را در داخل یک عنصر درون خطی(inline) مانند عنصر <i> یا <span> اضافه کنیم. تمام آیکون ها، که در کتابخانه ی زیر قرار دارند، بردارهای مقیاس پذیری(scalable vectors) هستند که می توانند با استفاده از CSS سفارشی سازی شوند(در زمینه های سایز یا رنگ یا سایه یا غیره).
اضافه کردن آیکون های Font Awesome
برای استفاده از آیکون های Font Awesome، به این آدرس بروید: fontawesome.com و کدی مانند زیر که باید در بخش <head> از صفحه ی HTML شما قرار گیرد را کپی کنید:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>در مقاله ی آموزش Font Awesome 5، در مورد شروع کار با این کتابخانه، بیشتر توضیح خواهیم داد.
نکته: در این روش، نیازی به دانلود یا نصب کتابخانه ی Font Awesome نیست.
برای مشاهده ی این کد در سایت fontawesome.com، ابتدا وارد این سایت شوید و روی دکمه ی Start For Free کلیک کنید.
سپس ایمیل خود را وارد کنید و روی دکمه ی زیر (شماره 3) کلیک کنید. یک ایمیل برای شما ارسال می شود. روی لینک ارسال شده در ایمیل خود کلیک کنید تا ثبت نام تکمیل شود:
سپس در سایت مورد نظر، روی دکمه ی log in کلیک کنید تا پنجره ی زیر باز شود و با استفاده از اطلاعاتی که ثبت نام کردید، ایمیل و رمز خود را وارد کنید:
سپس روی لینک نشان داده شده در تصویر زیر کلیک کنید:
سپس وارد صفحه ی زیر خواهید شد، کد زیر را کپی کنید، این همان کدی بود که برای اضافه کردن آیکون ها به سایت خود، به آن نیاز داشتیم:
مثال شماره 1
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></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> برای مشاهده ی مرجعی از تمام آیکون های Font Awesome، اینجا کلیک کنید.
استفاده از آیکون های بوت استرپ
برای استفاده از آیکون های بوت استرپ(Bootstrap glyphicons)، کد زیر را کپی کرده و در داخل بخش <head> از صفحه ی HTML خود قرار دهید:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
نکته: برای انجام این کار، نیازی به دانلود یا نصب چیزی نیست.
مثال شماره 2
<!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">نکته: برای استفاده از این آیکون ها، نیازی به دانلود یا نصب چیزی نداریم.
مثال شماره 3
<!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> برای مشاهده ی یک لیست کامل از آیکون ها، می توانید به این مقاله در W3schools مراجعه کنید.
- بازدید: 1140
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.