پرنیان طرح | انجام امور ارزی و ارائه خدمات طراحی وبسایت
حامد محمدی 
آیکن icon، امروزه یکی از اجزای تفکیک ناپذیر هر صفحه وب می باشد. آیکن ها میتوانند تداعی کننده موجودیتنی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.
در آموزش امروز همراه ما باشید تا نحوه استفاده از آیکن را در صفحات وب با هم تمرین کنیم.
با سلام خدمت همراهان همیشگی پرنیان طرح
در آموزش امروز، در خدمت شما هستیم با آموزش استفاده از آیکن در CSS
آیکن icon، امروزه یکی از اجزای تفکیک ناپذیر هر صفحه وب می باشد.
آیکن ها میتوانند تداعی کننده موجودیتی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.
آیکن ها کمک شایانی در فهم منظور یک نوشته یا متن، توسط کاربر دارند.
همراه ما باشید تا استفاده از این عنصر پرکاربرد را مرور کنیم.
آموزش کار با آیکن
برای اضافه کردن یک آیکن به صفحه وب سایتتان تنها کافیست. از کتابخانه آیکن استفاده کنید.
از جمله این کتابخانه ها می توان به Font Awesome اشاره کرد.
تمام آیکن های موجود در این کتابخانه، وکتورهای مقیاس پذیری هستند. که با استفاده از css میتوانید آنهارا شخصی سازی کنید.
برای استفاده از این کتابخانه خط زیر را به تگ <head>بخش کدهای html اضافه کنید.
[php]
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”>
[/php]
یک نکته جالب
برای فعالسازی آیکن ها، دانلود و یانصب هیچ افزونه ای نیاز نیست.
این روش cdn نام دارد. این روش برای نمایش آیکن ها از کتابخانه ای که در یک سرور خارجی قرار دارد استفاده می کند.
یک خبر خوب
شما محدود به این روش نیستید. شما می توانید کتابخانه Font Awesome را از سایت رسمی آن دانلود کنید. و آنرا به پرونده خود اضافه کنید.
نحوه کد نویسی برای اضافه کردن آیکن به صفحه وب به صورت زیر می باشد:
[php]
[/php]
آموزش کامل کدنویسی و نتایج حاصله را از طریق این لینک ببینید
برای مشاهده کامل آیکن های در دسترس و تمرین هریک،به این لینک مراجعه کنید.
Bootstrap Icons
برای اینکه بتوانید ازآیکن ها در برنامه نویسی بوت استرپ Bootstrap استفاده کنید. لینک زیر را به کدهای Html خود اضافه کنید:
[php]
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
[/php]
در اینجا هم نیازی به دانلود یا نصب نیست.
کدنویسی و نتایج حاصل در بوت استرپ را از این لینک ببینید.
Google Icons
برای استفاده از آیکن های گوگل، خط زیر را در بخش کدهای Html وارد کنید.
[php]
< link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
[/php]
نکته مهم:
تمام لینک هایی که برای اضافه کردن به بخش html معرفی ده اند. را در تگ <head> وارد کنید.
سلام.چرا در وبسایت اسام ایکن. ایکن ها رو که سرچ میکنیم چیزی نشون نمیده
سلام و احترام
آدرس وبسایتی که فرمودین رو بفرمایید.
سلام
به چه طریقی ی توان یک آیکون مانند آیکون های سری بالا، ساخت و به سایت افزود؟
با عرض سلام
فونت های سری بالا ، از سری فونت های کتابخانه Font Awesome هستند. برای استفاده از این فونت ها در صفحه وب ، فقط باید کد زیر را بین تگ head وارد کنید.
[php]
[/php]
با این کار فونت ها در صفحه شما فراخوانی می شوند.
برای نمایش کدها هم کافیست تگ مربوط به هر کدام را در محل مورد نظرتان وارد کنید.
برای مثال :[php] [/php] برای نمایش آیکون اتومبیل است. می توانید به این آیکون ها استایل دلخواهتان را هم بدهید.
موفق باشید.
سلام
میخوام به ویژگی های محصول آیکون اضافه کنم . چطور باید انجام بدهم
مثلا کنار حجم فایل آیکون زیپ قرار بدهم
ممنون
سلام خسته نباشید برای قراردادن ایکون درسایت خود تصویرایکون هم باید دانلود بشه
سلام و احترام
بله بهتره که تصاویر رو توی سرور خودتون اول داشته باشید و بعد ازشون تو سایتتون استفاده کنید.
mamnoon az tozihate mofidetoon