آموزش استفاه از آیکنIcon در css
آیکن icon، امروزه یکی از اجزای تفکیک ناپذیر هر صفحه وب می باشد. آیکن ها میتوانند تداعی کننده موجودیتنی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.
در آموزش امروز همراه ما باشید تا نحوه استفاده از آیکن را در صفحات وب با هم تمرین کنیم.
با سلام خدمت همراهان همیشگی پرنیان طرح
در آموزش امروز، در خدمت شما هستیم با آموزش استفاده از آیکن در CSS
آیکن icon، امروزه یکی از اجزای تفکیک ناپذیر هر صفحه وب می باشد.
آیکن ها میتوانند تداعی کننده موجودیتی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.
آیکن ها کمک شایانی در فهم منظور یک نوشته یا متن، توسط کاربر دارند.
همراه ما باشید تا استفاده از این عنصر پرکاربرد را مرور کنیم.
آموزش کار با آیکن
برای اضافه کردن یک آیکن به صفحه وب سایتتان تنها کافیست. از کتابخانه آیکن استفاده کنید.
از جمله این کتابخانه ها می توان به Font Awesome اشاره کرد.
تمام آیکن های موجود در این کتابخانه، وکتورهای مقیاس پذیری هستند. که با استفاده از css میتوانید آنهارا شخصی سازی کنید.
برای استفاده از این کتابخانه خط زیر را به تگ <head>بخش کدهای html اضافه کنید.
1 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> |
یک نکته جالب
برای فعالسازی آیکن ها، دانلود و یانصب هیچ افزونه ای نیاز نیست.
این روش cdn نام دارد. این روش برای نمایش آیکن ها از کتابخانه ای که در یک سرور خارجی قرار دارد استفاده می کند.
یک خبر خوب
شما محدود به این روش نیستید. شما می توانید کتابخانه Font Awesome را از سایت رسمی آن دانلود کنید. و آنرا به پرونده خود اضافه کنید.
نحوه کد نویسی برای اضافه کردن آیکن به صفحه وب به صورت زیر می باشد:
1 2 3 4 5 | <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> |
آموزش کامل کدنویسی و نتایج حاصله را از طریق این لینک ببینید
برای مشاهده کامل آیکن های در دسترس و تمرین هریک،به این لینک مراجعه کنید.
Bootstrap Icons
برای اینکه بتوانید ازآیکن ها در برنامه نویسی بوت استرپ Bootstrap استفاده کنید. لینک زیر را به کدهای Html خود اضافه کنید:
1 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
در اینجا هم نیازی به دانلود یا نصب نیست.
کدنویسی و نتایج حاصل در بوت استرپ را از این لینک ببینید.
Google Icons
برای استفاده از آیکن های گوگل، خط زیر را در بخش کدهای Html وارد کنید.
1 | < link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
نکته مهم:
تمام لینک هایی که برای اضافه کردن به بخش html معرفی ده اند. را در تگ <head> وارد کنید.
میخواهم درباره آیکن Icon بیشتر بدانم.
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام.چرا در وبسایت اسام ایکن. ایکن ها رو که سرچ میکنیم چیزی نشون نمیده
سلام و احترام
آدرس وبسایتی که فرمودین رو بفرمایید.