آموزش استفاه از آیکنIcon در css

بازدید: 1,741 بازدید
آموزش کار با آیکن در css

آیکن 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> وارد کنید.

 

میخواهم درباره آیکن Icon بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

7 پاسخ به “آموزش استفاه از آیکنIcon در css”

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.