مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. آیکون ها در CSS یکی از ویژگی های جدیدی است که در اغلب وب سایت ها به چشم می خورد، این ها آیکون های برنامه های مختلف هستند، این آیکون ها معمولا شبکه های اجتماعی ، ابزارهای داخلی وب سایت ، منوهای کاربردی وب سایت و… را نشان می دهند، در ابتدا استفاده از آیکون به دلیل استفاده از تصاویر و تنظیم دستی آن کار دشواری بود، اما اخیرا ارائه ی کلاس ها و کتابخانه های آماده ای از آیکون ها از جمله Font Awesome استفاده از آیکون در وب سایت را بسیار آسان کرده است. در ادامه این بخش ما شما را با طرز استفاده از آیکون ها در CSS آشنا خواهیم کرد.
آیکون ها در CSS
در این آموزش طرز استفاده از کتابخانه های مختلف آیکون ها در CSS را ارائه کرده ایم.
طرز افزودن آیکون ها
ساده ترین راه برای اضافه کردن یک آیکون به صفحه HTML شما، استفاده از یک کتابخانه آیکون مانند Font Awesome است.
کافیست نام کلاس مشخص شده را به یک عنصر HTML درون خطی (inline) (مانند <i> یا <span>) اضافه کنید.
آیکون های Font Awesome
برای استفاده از آیکون های Font Awesome ابتدا باید کد زیر را به بخش <head> وب سایت خود اضافه کنید:
مثال :
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
نکته: دانلود و نصب چیزی نیاز نیست.
مثال : آیکون های font-awesome
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-cloud"></i> <i class="fa fa-heart"></i> <i class="fa fa-car"></i> <i class="fa fa-file"></i> <i class="fa fa-bars"></i> </body> </html> |
نتایج html فوق:
آیکون ها در CSS
آیکون های Bootstrap
برای استفاده از آیکون های Bootstrap باید کد زیر را به بخش <head> صفحه وب اضافه کنید:
مثال :
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
نکته : دانلود و یا نصب چیزی مورد نیاز نیست.
مثال : آیکون های Bootstrap
| <!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> |
نتیجه ی کد فوق:
آیکون ها در CSS – بوت استرپ
آیکون های Google
برای استفاده از آیکون های Google باید کد زیر را به بخش <head> صفحه وب اضافه کنید:
مثال :
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
نکته : دانلود و یا نصب چیزی مورد نیاز نیست.
مثال : آیکون های Google
| <!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> |
نتیجه ی html فوق به صورت زیر خواهد بود:
آیکون ها در CSS – گوگل
کلام آخر
کلاس و کتابخانه های آیکون ها در CSS با ایجاد نماد و اشکال مرتبط کار کاربران وب سایت ها را راحت تر و بخش های مختلف وب سایت را نیز زیباتر و قابل فهم تر می کند.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
mahdi
عالی همرو گفتی ممنون
سامان جهان
برای فراخوانی به اینترنت باید دسترسی داشت؟