جستجو برای:
سبد خرید 0
  • خانه
  • آموزش وردپرس
  • قالب وردپرس
    • افزونه وردپرس
    • آموزش html
    • آموزش php
  • درباره ما
  • حساب کاربری
  • تماس با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 02433763920 (ساعت 10 الی 14)
  • info@parniantarh.ir
perm_identity
سبد خرید 0
  • آخرین محصولات
  • آخرین مطالب آموزشی
0
پرنیان طرح
  • خانه
  • وردپرس
    • آموزش وردپرس
    • قالب وردپرس
    • افزونه وردپرس
  • آموزش برنامه نویسی
    • آموزش bootstrap
    • آموزش android
    • آموزش php
    • آموزش html
    • آموزش css
    • آموزش JavaScript
    • مقالات آموزشی
  • آموزش فتوشاپ
  • تماس با ما
  • درباره ما
ورود و ثبت نام

وبلاگ

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

access_time۱۳۹۸-۰۴-۳۱
perm_identity ارسال شده توسط رویا نجفی
folder_open آموزش css
visibility 751 بازدید
آموزش کار با آیکن در css

آیکن icon، امروزه یکی از اجزای  تفکیک ناپذیر هر صفحه وب می باشد. آیکن ها میتوانند تداعی کننده موجودیتنی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.

در آموزش امروز همراه ما باشید تا نحوه استفاده از آیکن را در صفحات وب با هم تمرین کنیم.

با سلام خدمت همراهان همیشگی پرنیان طرح

در آموزش امروز، در خدمت شما هستیم با آموزش استفاده از آیکن در CSS

آیکن icon، امروزه یکی از اجزای  تفکیک ناپذیر هر صفحه وب می باشد.

آیکن ها میتوانند تداعی کننده موجودیتی باشند که برای کاربر آشناست. و با استفاده از نمایش بصری، در زمان کوتاهی منظور خود را به کاربر می فهماند.

آیکن ها کمک شایانی در فهم منظور یک نوشته یا متن، توسط کاربر دارند.

همراه ما باشید تا استفاده از این عنصر پرکاربرد را مرور کنیم.

آموزش کار با آیکن

برای اضافه کردن یک آیکن به صفحه وب سایتتان تنها کافیست. از کتابخانه آیکن استفاده کنید.

از جمله این کتابخانه ها می توان به Font Awesome اشاره کرد.

تمام آیکن های موجود در این کتابخانه، وکتورهای مقیاس پذیری هستند. که با استفاده از css میتوانید آنهارا شخصی سازی کنید.

برای استفاده از این کتابخانه خط زیر را به تگ <head>بخش کدهای html اضافه کنید.

PHP
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 را از سایت رسمی آن دانلود کنید. و آنرا به پرونده خود اضافه کنید.

نحوه کد نویسی برای اضافه کردن آیکن به صفحه وب به صورت زیر می باشد:

PHP
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 خود اضافه کنید:

PHP
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

در اینجا هم نیازی به دانلود یا نصب نیست.

کدنویسی و نتایج حاصل در بوت استرپ را از این لینک ببینید.

 

Google Icons

برای استفاده از آیکن های گوگل، خط زیر را در بخش کدهای Html وارد کنید.

PHP
1
< link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

نکته مهم:

تمام لینک هایی که برای اضافه کردن به بخش html معرفی ده اند. را در تگ <head> وارد کنید.

 

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

5 / 5 ( 1 vote )
برچسب ها: Icon in cssآموزش cssآموزش آیکن در cssآیکنآیکوناموزش آیکنایکن


ارسال این مطلب برای دوستان خود :
مطالب زیر را حتما بخوانید
  • نقشه svg ایران
    نقشه svg ایران – با html و css

    494 بازدید

  • قالب های 404
    قالب های ۴۰۴ حرفه ای و جذاب فارسی – دانلود رایگان

    523 بازدید

  • آشنای با ویژگی های css
    آشنایی با ویژگی های css یا Css Specificity

    524 بازدید

  • آموزش واحدها در css
    آموزش واحدها Units در Css

    524 بازدید

  • آموزش چیدمان وب سایت
    آموزش چیدمان وب سایت Website Layout در css

    545 بازدید

جدید تر آموزش بخش ابزارها در وردپرس
قدیمی تر آموزش استایل دهی به لینک ها Link در css

پاسخی بگذارید لغو پاسخ

جستجو برای:
  • جدید
  • محبوب
  • دیدگاه ها
قبلی بعدی
فروش ویژه
  • Munza | قالب چند منظوره وردپرس Munza | قالب چند منظوره وردپرس | قویترین پوسته 2019 79,000 تومان 49,000 تومان
  • دانلود افزونه visual composer ویژوال کامپوزر + آموزش 45,000 تومان 28,000 تومان
  • سورس سیستم تیکت (ارسال پیام) به زبانphp با فونت زبای ایران سنس 35,000 تومان 20,000 تومان
  • دانلود افزونه WP Rocket -افزایش سرعت سایت وردپرس 57,000 تومان 26,000 تومان
  • فرم لاگین (ورود) متحرک و جذاب ورژن 1 - Login form 15,000 تومان 1,000 تومان
  • افزونه Livicons برای وردپرس افزونه Livicons برای وردپرس - نسخه 2.7.3 69,000 تومان 35,000 تومان
  • ipts نرم افزار افزایش بازدید سایت و کاهش رتبه ipts نسخه نهایی
    امتیاز 2.00 از 5
    19,900 تومان 7,900 تومان
  • آموزش ووکامرس راه اندازه فروشگاه اینترنتی با ووکامرس
    امتیاز 5.00 از 5
    35,000 تومان 9,900 تومان
دسته‌ها
  • #ویدئوها
  • آموزش
  • آموزش bootstrap
  • آموزش css
  • آموزش html
  • آموزش JavaScript
  • آموزش اندروید
  • آموزش قالب
  • آموزش های دامنه
  • اخبار وردپرس
  • برنامه نویسی php
  • دسته‌بندی نشده
  • فتوشاپ
  • قالب های html – css
  • کسب و کار آنلاین
  • مقاله ها
  • هاست سی پنل Cpanel
  • وردپرس
جدیدترین نوشته ها
  • آموزش نحوه حذف یک شخص از تصویر در فتوشاپ ۱۳۹۸-۰۹-۱۵
  • آموزش دسته بندی عکس ها در Photoshop Elements ۱۳۹۸-۰۹-۱۴
  • آموزش چرخش تصویر Flip در فتوشاپ ۱۳۹۸-۰۹-۱۲
  • نحوه تغییر سایز تصویر در فتوشاپ ۱۳۹۸-۰۹-۱۱
  • تماس با متد در جاوا اسکریپت ۱۳۹۸-۰۹-۱۱
  • ایجاد تصاویر پانوراما Panorama در فتوشاپ ۱۳۹۸-۰۹-۱۰
  • حذف کردن پس زمینه یک تصویر با استفاده از فتوشاپ CS6 ۱۳۹۸-۰۹-۰۹
  • نحوه افزودن تصویری در متن در فتوشاپ ۱۳۹۸-۰۹-۰۸

درباره پرنیان طرح

ما در پرنیان طرح به دنبال جلب رضایت مشتری و تبدیل کاربران موقت به کاربران دائمی هستیم و با تیمی 4 نفره همه روزه در تلاشیم تا بهترین کیفیت و خدمات را برای شما محیا سازیم.




  • location_on
    زنجان ، میدان شورا ، مرکز رشد جهاد ، واحد 15
  • phone_android
    024-33763920
  • perm_phone_msg
    09190605638
  • email
    info@parniantarh.ir
تمامی حقوق متعلق به وبسایت پرنیان طرح میباشد.
طراحی شده با ❤️ در پرنیان طرح
keyboard_arrow_up