خانه / آموزش CSS / بخش چهاردهم-آموزش آیکون ها در CSS
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۲۳ بهمن ۱۳۹۷ تعداد بازدید : 14 بازدید بدون دیدگاه

بخش چهاردهم-آموزش آیکون ها در CSS

 

قدم قبلی >< قدم بعدی

 

بررسی و آموزش آیکون ها در CSS
آموزش آیکون ها در CSS

اضافه کردن آیکون ها در CSS

 

ساده ترین راه برای اضافه کردن یک آیکون به صفحه HTML ، استفاده از یک کتابخانه آیکون مانند Font Awesome است.

نام کلاس آیکون مشخص شده را به هر عنصر درون خطی HTML  (مانند <i> یا <span>) اضافه کنید.

تمام آیکون های موجود در کتابخانه های آیکون در زیر، بردارهای مقیاس پذیر هستند که می توانند به لحاظ (اندازه، رنگ، سایه و غیره) با CSS سفارشی شوند.

آیکون های Font Awesome

از جمله آیکون ها در CSS ، آیکون های Font Awesome، هستند که برای استفاده از آنها باید خط زیر را در قسمت <head> صفحه HTML خود اضافه کنید:

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384 lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”>

توجه: دانلود یا نصب لازم نیست!

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

همین حالا ببینید:  بخش پنجم-خصوصیات CSS background

آیکون های Bootstrap 

از معروف ترین آیکون ها در CSS  آیکون های  Bootstrap glyphicons، هستند برای استفاده از آنها باید خط زیر را در قسمت <head> صفحه HTML خود اضافه کنید:

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

توجه: دانلود یا نصب لازم نیست!

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

همین حالا ببینید:  بخش هجدهم- آموزش خصوصیت display در CSS یا CSS Layout

 

 

آیکون های گوگل

از دیگر آیکون ها در CSS  آیکون های  Google، هستند برای استفاده از آنها باید خط زیر را در قسمت <head> صفحه HTML خود اضافه کنید:

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

توجه: دانلود یا نصب لازم نیست!

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

همین حالا ببینید:  بخش هفتم- آموزش Margins در CSS

 

 

گام قبلی >< گام بعدی

 

بخش چهاردهم-آموزش آیکون ها در CSS
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15526


کانال تلگرام تیک تم

مطلب پیشنهادی

آموزش CSS Text

بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

  CSS Text در این درس به بررسی خصوصیات متن در CSS می پردازم. این خصوصیات …

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

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