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

حامد محمدیحامد محمدی
325 بازدید
آموزش کار با آیکن در 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”

    1. با عرض سلام
      فونت های سری بالا ، از سری فونت های کتابخانه Font Awesome هستند. برای استفاده از این فونت ها در صفحه وب ، فقط باید کد زیر را بین تگ head وارد کنید.
      [php]
      [/php]
      با این کار فونت ها در صفحه شما فراخوانی می شوند.
      برای نمایش کدها هم کافیست تگ مربوط به هر کدام را در محل مورد نظرتان وارد کنید.
      برای مثال :[php] [/php] برای نمایش آیکون اتومبیل است. می توانید به این آیکون ها استایل دلخواهتان را هم بدهید.
      موفق باشید.

  1. سلام
    میخوام به ویژگی های محصول آیکون اضافه کنم . چطور باید انجام بدهم
    مثلا کنار حجم فایل آیکون زیپ قرار بدهم
    ممنون

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

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

ورود به سایت