آیکن‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

چطور آیکن ها را اضافه کنیم؟

ساده‌ترین روش برای اضافه‌کردن یک icon به صفحه HTML ، بوسیله یک کتابخانه icon، همانند Font Awsome است.[۱]

نام کلاس آیکن خاصی را به هر عنصر داخلی HTML (مانند <i> یا <span>) اضافه کنید.

تمامی آیکن های موجود در کتابخانه‌های icon زیر، بردارهای مقیاس پذیری هستند که می‌توان به وسیله CSS (اندازه، رنگ، سایه، و…) آنها را شخصی‌سازی کرد.

آیکن های font awsome

برای استفاده از آیکن‌های font awsome، به وب‌سایت fontawesome.com بروید، ثبت نام کنید، و یک کد برای اضافه‌کردن در قسمت <head> صفحه HTML خود دریافت کنید:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

مطالب بیشتری را در مورد نحوه کار با Font Awsome در آموزش Font Awesome 5 ما بخوانید.

نکته: هیچگونه دانلود یا عملیات نصبی نیاز نیست!

مثال
 1 <!DOCTYPE html>
 2 
 3 <head>
 4 <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 5 </head>
 6 <body>
 7 
 8 <i class="fas fa-cloud"></i>
 9 <i class="fas fa-heart"></i>
10 <i class="fas fa-car"></i>
11 <i class="fas fa-file"></i>
12 <i class="fas fa-bars"></i>
13 
14 </body>

نتیجه:

برای مشاهده مرجع کاملی از تمامی آیکن‌های font awsome، مرجع آیکن ما را ببینید.

آیکن های bootstrap

برای استفاده از glyphiconهای bootstrap، تکه کد زیر را در قسمت <head> صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

نکته: هیچگونه دانلود یا عملیات نصبی نیاز نیست!

مثال
 1 <!DOCTYPE html>
 2 
 3 <head>
 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 5 </head>
 6 <body>
 7 
 8 <i class="glyphicon glyphicon-cloud"></i>
 9 <i class="glyphicon glyphicon-remove"></i>
10 <i class="glyphicon glyphicon-user"></i>
11 <i class="glyphicon glyphicon-envelope"></i>
12 <i class="glyphicon glyphicon-thumbs-up"></i>
13 
14 </body>

نتیجه:


آیکن های google

برای استفاده از آیکن‌های google، تکه کد زیر را درون قسمت <head> صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

نکته: هیچگونه دانلود یا عملیات نصبی نیاز نیست!

مثال
 1 <!DOCTYPE html>
 2 
 3 <head>
 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 5 </head>
 6 <body>
 7 
 8 <i class="glyphicon glyphicon-cloud"></i>
 9 <i class="glyphicon glyphicon-remove"></i>
10 <i class="glyphicon glyphicon-user"></i>
11 <i class="glyphicon glyphicon-envelope"></i>
12 <i class="glyphicon glyphicon-thumbs-up"></i>
13 
14 </body>

نتیجه:

برای مشاهده لیست کاملی از آیکن‌ها، آموزش Icon ما را مشاهده کنید.


منابع آموزشی